Вот очень простой пример создания таблички. Помогите понять, почему первый вариант работает, а второй нет, хотя по факту он должен был бы быть полностью эквивалентным?
var table = document.createElement("table");
var tr = document.createElement("tr");
var td = document.createElement("td");
var text = document.createTextNode("Пример 1");
td.appendChild(text);
tr.appendChild(td);
table.appendChild(tr);
document.body.appendChild(table);
document.body.appendChild(
document.createElement('table').appendChild(
document.createElement('tr').appendChild(
document.createElement('td').appendChild(
document.createTextNode('Пример 2')
)
)
)
);
Что любопытно, выходит что appendChild
возвращает добавленный елемент, поэтому вот эти два варианта также работают:
document.body.appendChild(document.createElement('table'))
.appendChild(document.createElement('tr'))
.appendChild(document.createElement('td'))
.appendChild(document.createTextNode('Пример 3'));
var table1 = document.createElement("table");
var table2 = document.body.appendChild(table1);
var tr1 = document.createElement("tr");
var tr2 = table2.appendChild(tr1);
var td1 = document.createElement("td");
var td2 = tr2.appendChild(td1);
var text = document.createTextNode("Пример 4");
td2.appendChild(text);
Пример 3 и 4 по-идее эквивалентны, как и 1 и 2. Работают все кроме 2.
Что я делаю не так?