如何在JavaScript中將節點追加到div的開頭？

我目前正在將一個節點追加到一個div的末尾來動態添加到一個div，但我正在尋找將它追加到開頭而不是div的結尾。如何在JavaScript中將節點追加到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的開始？

來源

2013-02-11 Daniel Fein

您可以使用insertBefore()與父母的firstChild作爲參考元素：

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

來源

2013-02-11 06:47:10

如果節點/元素是無子的。這將如何工作？ – 2013-02-11 06:55:14

@Justin，在這種情況下，firstChild將爲null，並且insertBefore（）將繼續將新元素附加到父元素的末尾（這與開始時相同，因爲它是空的）。 – 2013-02-11 06:56:15

+1感謝您的回覆。 – 2013-02-11 07:01:06

查找到的jQuery（http://www.jquery.com），因爲它會讓你的生活只是這麼容易得多。其他庫存在，但jQuery是最流行的。

您的代碼使用jQuery：

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

而對於前面加上：

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

來源

2013-02-11 06:47:54 turiyag

element.insertBefore(para, element.firstChild)

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

來源

2013-02-11 06:48:19

我不敢肯定，但你可以做這樣的事情：

<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>

來源

2013-02-11 06:48:38

你可以使用javascript insertBefore（）方法。當你添加到DOM。

來源

2013-02-11 06:48:53

如何在JavaScript中將節點追加到div的開頭？

回答

相關問題