JavaScript DOM-код не работает

Question

Мой HTML имеет

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

Следующий синтаксис не работает.

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

И после содержимого ячейки у меня разрыв строки, за которым следует другой текст маленькими буквами в той же ячейке. Как я могу это сделать?

Answer 1

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

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

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

Answer 2

Похоже, вы пытаетесь связать вызовы методов ... Извините! Нет цепочки для родных элементов. Если вы хотите создать цепочку, попробуйте 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);

Answer 3

Как сделать еще один текст меньше

Полагаю, вы пытаетесь применить мой код из текста нижнего индекса в 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%; }