1

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

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.

Что я делаю не так?

2 ответа 2

0

Что любопытно, выходит что appendChild возвращает добавленный елемент

Именно поэтому второй вариант и не работает. Код

document.createElement('tr').appendChild(
  document.createElement('td').appendChild(
    document.createTextNode('Пример 2')
  )
)

равносилен

var text1 = document.createTextNode('Пример 2');
var text2 = document.createElement('td').appendChild(text1)
var text3 = document.createElement('tr').appendChild(text2)

Вы добавляете 'Пример 2' и в td, и в tr, и далее, а td в документ не добавляется. Если бы appendChild возвращал элемент, в который происходит добавление, то второй вариант бы работал, но третий работал бы некорректно

1
  • замечательный ответ, спасибо! не понимаю, как я сразу не связала это все, когда стало ясно как работает appendChild() 20 ноя 2017 в 21:27
0

Потому что добавляется возвращаемый елемент, а не тот который был создан. То есть в конструкции

document.body.appendChild(
  document.createElement('table').appendChild(
    document.createElement('tr').appendChild(
      document.createElement('td').appendChild(
        document.createTextNode('Пример 2')
      )
    )
  )
);

по сути ничего не добавляется, кроме 'Пример 2', который возвращается из всех appendChild().

Заметки:

Цепочка может работать не так, как ожидалось из-за того, что appendChild() возвращает дочерний элемент:

var aBlock = doc.createElement ('block'). appendChild (doc.createElement ('b'));

Устанавливает aBlock только <b> </ b>, чего вы, скорее всего, не хотите.

1
  • спасибо за ответ! теперь все понятно. 20 ноя 2017 в 21:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.