标签:
用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()的用法
标签:
原文地址:http://www.cnblogs.com/wbengineer/p/4709605.html