js建立與追加元素

用javascript建立元素 ：

1 var NewNode = document.creatElement('div');

結合appendChild與insertBefore插入到DOM樹中

insertBefore：語法：

var insertedNode = parentNode.insertBefore(newNode,referenceNode)

例子

<div>
    <button onclick="creatEle" id="btn">點擊建立新btn</button>
<div>

<script>
//建立一個新btn
var newBtn = document.creatElement('button');
newBtn.value="value";
newBtn.style.width = 50px;
newBtn.style.height = 50px;
//追加新建立的btn
var oldBtn = document.getElementById('btn');
var parentNode = oldBtn.parentNode;
//parentNode.insertBefore(newBtn,oldBtn);//在原有btn的前面插入新建立的btn；
parentNode.insertBefore(newBtn,oldBtn.nextSiblings)//將在原有btn的後面插入新建立的btn，！！！緣由是沒有insetAfter！！因此用nextSiblings
</script>

appendChild 語法

var aChild = element.appendChild(aChild);

例子

//html結構見上
var newBtn = document.creatElement('button');
var oldBtn = document.getElementById('btn');
var parentNode = oldBtn.parentNode;
parentNode.appendChild(newBtn);


//MDN 例子
var p = document.createElement("p");
document.body.appendChild(p);

總結：二者都是在父元素內追加子元素，insertBefore能夠經過referenceNode.siblings向後插入子元素。

 

參考：MDN Node.appendChild()  document.createElement()的用法