JavaScript DOM code not working

Question

My HTML has

cell = document.createElement("td");
cell.appendChild(document.createTextNode(contents));
cell.setAttribute('width', '100');

// The following syntax not working

cell.appendChild(document.createElement('br')).appendChild(document.createTextNode("Another text"));

And after the contents of the cell, I have a line break followed by Another Text in small letters in same cell;How to do it?

Answer 1

It looks like you are trying to chain your method calls... Sorry! No chaining for native elements. If you want chaining then try jQuery, otherwise try:

var cell = document.createElement("td");
cell.appendChild(document.createTextNode(contents));
cell.setAttribute('width', '100');

// To make some text smaller you'll need it in a different element like a span
var span = document.createElement('span');
span.className = 'your-class-for-small-text';
span.appendChild(document.createTextNode("Another text"));

cell.appendChild(document.createElement('br'));
cell.appendChild(span);

You'll have to add some css to style that span to have smaller text:

<style type="text/css">
    .your-class-for-small-text {
        font-size: 12px;
    }
</style>

Or you could just modify the style of that element instead of using the className:

var cell = document.createElement("td");
cell.appendChild(document.createTextNode(contents));
cell.setAttribute('width', '100');

// To make some text smaller you'll need it in a different element like a span
var span = document.createElement('span');
span.style.fontSize = '12px';
span.appendChild(document.createTextNode("Another text"));

cell.appendChild(document.createElement('br'));
cell.appendChild(span);

Answer 2

First of all, you are appending a text node to a BR tag which has no children.

Try to split your line in two calls instead:

cell.appendChild(document.createElement('br'));
cell.appendChild(document.createTextNode("Another text"));

Answer 3

How to make Another Text is To be smaller

I'm guessing you're trying to apply my code from http://stackoverflow.com/questions/450424/subscript-text-in-html :

cell.appendChild(document.createElement('sub')).appendChild(document.createTextNode(subdata));

This works because Node.appendChild returns the child it just appended, which is a sub element. The second appendChild call puts the text node inside the sub element. This doesn't work with br because br is an empty element, you can't put anything inside it. You can put something after it, but that's not what the code is doing.

Whilst you could do it using a sub element (using the line above just after appending the br), it might be nicer to use a styled block element:

cell.appendChild(document.createElement('div'));
cell.lastChild.className= 'less-important';
cell.lastChild.appendChild(document.createTextNode(subdata));

in stylesheet:

.less-important { font-size: 80%; }