Код JavaScript DOM не работает

Похоже, вы пытаетесь связать вызовы методов ... Извините! Нет цепочки для собственных элементов. Если вы хотите использовать цепочку, попробуйте jQuery, в противном случае попробуйте:

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);

Вам нужно будет добавить немного CSS в стиль, который будет иметь меньший текст:

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

Или вы можете просто изменить стиль этого элемента вместо использования 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);

Прежде всего, вы добавляете текстовый узел к тегу BR, у которого нет дочерних элементов.

Вместо этого попробуйте разделить вашу линию на два вызова:

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

How to make Another Text is To be smaller

Я предполагаю, что вы пытаетесь применить мой код из Подстрочный текст в HTML:

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

Это работает, потому что Node.appendChild возвращает только что добавленный дочерний элемент, который является подэлементом. Второй вызов appendChild помещает текстовый узел внутрь подэлемента. Этот не работает с br, потому что br - пустой элемент, в него ничего нельзя поместить. Вы можете поставить что-нибудь после него, но код делает это не так.

Хотя вы можете сделать это с помощью подэлемента (используя строку выше сразу после добавления br), может быть лучше использовать стилизованный блочный элемент:

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

в таблице стилей:

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