Почему appendChild() переопределяет createElement(), если он был скован в конце?

Question

Вопрос: Я пытаюсь понять, почему я не могу цепочка appendChild() метод document.createElement() так:

var listItem = document.createElement('li').appendChild(text); 

HTML

<ul> 
    <li id="one"><em>fresh</em> figs</li> 
    <li id="two">pine nuts</li> 
    <li id="three">honey</li> 
    <li id="four">balsamic vinegar</li> 
</ul> 

Я знаю, что это правильный путь сделать это:

var ul = document.getElementsByTagName('ul')[0]; 
var txt = document.createTextNode('this is a text string'); 
var el = document.createElement('li'); 
el.appendChild(txt); 

но почему, когда я это сделать:

var ul = document.getElementsByTagName('ul')[0]; 
var text = document.createTextNode('I am the first generated list'); 
var listItem = document.createElement('li').appendChild(text); 
ul.appendChild(listItem); 

удаляет элемент li, который я создал, и добавляю текст ТОЛЬКО к элементу ul! Почему?

Answer 1

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

удаляет литиево элемент I сформированную

Нет, это не приводит к удалению его; он никогда не добавляет его, потому что listItem не является ссылкой на созданный вами элемент; вместо этого это текстовый узел. Из DOM3 spec:

appendChild (модифицированный в DOM Level 3)

Добавляет узел newChild в конец списка детей данного узла. Если newChild уже находится в дереве, он сначала удаляется.

Параметры

• newChild типа Node
  Узел для добавления. Если это объект DocumentFragment, все содержимое фрагмента документа перемещаются в списке потомков этого узла

Возвращаемое значение

• Node
  добавлен узел.

Примечание возвращаемого значения.

Answer 2

На самом деле, он не удаляется, метод appendChild возвращает присоединенный дочерний элемент, поэтому во втором случае listItem содержит ссылку на текстовый узел, который добавляется.

var ul = document.getElementsByTagName('ul')[0]; 
 
var el = document.createElement('li'); 
 
el.appendChild(document.createTextNode('this is a text string')); 
 
// or el.textContent = 'this is a text string'; 
 

 
ul.appendChild(el);

<ul> 
 
    <li id="one"><em>fresh</em> figs</li> 
 
    <li id="two">pine nuts</li> 
 
    <li id="three">honey</li> 
 
    <li id="four">balsamic vinegar</li> 
 
</ul>