用javascript创建元素 :
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向后插入子元素。