基本的なDOMチェーニングの理解

Question

JavaScriptとDOMの使用を開始していますが、jQueryなどから故意に遠ざかりようとしています。このことを念頭に置いて、チュートリアルは、一般的にこのような例を提供します。これを合理化し、変数を回避するための試みにおいて

h = document.createElement("h1"); 
t = document.createTextNode("Hello."); 
h.appendChild(t); 
document.body.appendChild(h); 

、私は正常に次のようにチェーン：

document.body.appendChild(document.createElement("h1")).appendChild(document.createTextNode("Hello.")); 

これは動作しますが、私が試しました以下で

h = document.createElement("h1"); 
t = document.createTextNode("Put this on top."); 
h.appendChild(t); 
document.body.insertBefore(h,document.body.firstChild); 

：以下プリペンド操作を短縮する

document.body.insertBefore(document.createElement("h1")).appendChild(document.createTextNode("Put this on top."),document.body.firstChild); 

しかし今回は、希望通りに動作しませんでした。テキストは、BODY要素の最後に置かれ、前置符号の代わりに追加を取得します。

私は最初のケースがうまくいくと思っていますが、私はこの連鎖練習で何が間違っているのか分かりません。

Answer 1

誤った場所にかっこがあります。あなたのライン：

document.body.insertBefore(
    document.createElement("h1").appendChild(
     document.createTextNode("Put this on top.")), document.body.firstChild); 

これは、一般的に1行にすべてをマージする悪い考えですなぜ今、あなたは理解して：それはどのようにあるべき

document.body.insertBefore(document.createElement("h1")) 
.appendChild(document.createTextNode("Put this on top."), document.body.firstChild); 

。

この固定線では、 '変数付きのコード'の正確な動作は得られません。これは、.appendChildが子DOMエレメント（ケース内で<INPUT>）を返し、親ではない（ケースでは<H1>）ためです。しかし、文書の冒頭にはすべて<H1> DOM要素が追加されています。

document.body.insertBefore(
    document.createElement("h1").appendChild(
     document.createTextNode("Put this on top.")).parentNode, document.body.firstChild) 

Guysは、これは教育目的のためだけであり、このようなコードを使用しないで下さい）））あなたは、あなたの `のinsertBeforeを（閉じた