なぜ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は、呼び出された要素への参照を返さなければなりませんが、そうではありません。あなたが渡した引数を返します。

それは私がいいえ、それはそれは削除されません

を形成li要素を削除します。 listItemは作成した要素への参照ではないため、追加することはありません。代わりにテキストノードです。 DOM3 specから：

（DOMレベル3に変更）

appendChildこのノードの子リストの末尾にノードnewChildを追加します。 newChildが既にツリーに存在する場合は、最初に削除されます。

パラメータタイプNode
追加するノードの

• newChild。それがDocumentFragmentオブジェクトである場合は、ドキュメントフラグメントの内容全体は、ノードが追加

戻り値

• Node
  このノードの子リストに移動されます。

戻り値に注意してください。

Answer 2

実際には削除されていません。appendChildメソッドは、追加された子を返します。したがって、2番目のケースでは、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>