Question

My HTML has

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

The following syntax is 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 can I 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);