5

私は 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 要素の最後に配置され、先頭ではなく末尾に追加されます。

成功した最初のケ​​ースはまぐれにすぎないと思いますが、この連鎖の実践の何が問題なのかわかりません。

4

1 に答える 1

6

間違った場所に括弧があります。あなたの行：

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

それがどうあるべきか：

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

これで、すべてを 1 行にマージすることが一般的に悪い考えである理由がわかりました。

OK、この固定行では、「変数を使用した」コードの正確な動作は得られません。これは、.appendChild が<INPUT>親 (あなたの場合) ではなく、子 DOM 要素 (あなたの場合) を返すため<H1>です。ただし、すべての<H1>DOM 要素がドキュメントの先頭に追加されるようにする必要があります。これを 1 行で実現するには、.parentNode プロパティを使用する必要があります。

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

みんな、そのようなコードを使用しないでください、これは教育目的のためだけです)))

于 2012-12-17T20:50:15.723 に答える