web-dev-qa-db-ja.com

bodyタグにinsertBefore（）要素を挿入する方法は？

私はこのようにjsでinsertBeforeを使用しようとしています：

var p = document.createElement("p");
p.innerHTML = "test1";
document.body.insertBefore(p, null);

var p = document.createElement("p");
p.innerHTML = "test2";
document.body.insertBefore(p, null);

しかし、それはbodyタグの終わりの直前に最後のp要素を追加しますが、それが開いたときにトップに追加されるようにどのように使用できますか？したがって、最後に追加される要素は、bodyタグ内の最初の要素になります。

私は試した：

document.body.insertBefore(p, document.getElementsByTagName('body')[0]);

しかし、firebugは以下を示します。

ノードが見つかりませんでした）コード： "8

javascriptdominsertgetelementsbytagname
46
slemdx

bodyプロパティを使用して、firstChild要素の最初の子を取得できます。次に、それを参照として使用します。

const p = document.createElement("p");
p.textContent = "test1";
document.body.insertBefore(p, document.body.firstChild);

あなたのコードを近代化した理由は:)

77
alex
document.body.prepend(p);

これは（おそらく）ES7の新しい追加です。これはVanilla JSであり、以前のオプションよりも読みやすくなっています。現在、Chrome、FF、Operaを含む ブラウザの83％ で利用可能です。

文字列を直接追加できますが、「p」タグにはなりません

document.body.prepend('This text!');

リンク： developer.mozilla.org - Polyfill

6
Gibolt

何かの前に挿入する必要があります。 document.getElementsByTagName('body')[0]is body要素（構文はすべてのブラウザでbody要素を取得するためのちょっとしたトリックです）1。本文に挿入する場合は、その最初の要素の前に挿入します。次のようになります。

var body   = document.body || document.getElementsByTagName('body')[0],
    newpar = document.createElement('p');
newpar.innerHTML = 'Man, someone just created me!';
body.insertBefore(newpar,body.childNodes[0]);

1一部のブラウザではdocument.body、その他document.documentElementなど。ただし、すべてのブラウザでタグ名はbodyです。

2
KooiInc