javascript - Javascriptでdivの先頭にノードを追加するにはどうすればよいですか?

Question

現在、div に動的に追加するために div の最後にノードを追加していますが、div の最後ではなく最初にノードを追加しようとしています。

私の現在のコードは次のようになります。

var para=document.createElement('div');

var node=document.createTextNode('this is new');
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);


<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

divの先頭に追加するにはどうすればよいですか?

Answer 1

親のfirstChildを参照要素としてinsertBefore()を使用できます。

var element = document.getElementById("div1");
element.insertBefore(para, element.firstChild);

Answer 2

jQuery ( http://www.jquery.com ) を調べてみてください。他にもライブラリはありますが、jQuery が最も人気があります。

jQuery を使用したコード:

$("<div/>").append("this is new").appendTo($("#div1"))

そして先頭に追加する場合：

$("<div/>").prepend("this is new").prependTo($("#div1"))

Answer 3

element.insertBefore(para, element.firstChild )

https://developer.mozilla.org/en-US/docs/DOM/Node.insertBefore?redirectlocale=en-US&redirectslug=DOM%2Felement.insertBefore

Answer 4

よくわかりませんが、次のようなことができます：

<script type="text/javascript">
window.onload=function(){
dv=document.createElement('div1');
txt=document.createTextNode('this is new');
dv.appendChild(txt);
document.getElementById('div1').appendChild(dv);
}
</script>

Answer 5

javascript の insertBefore() メソッドを使用できます。あなたがdomに追加しているとき。