码迷,mamicode.com
首页 > Web开发 > 详细

js创建与追加元素

时间:2015-08-07 01:45:48      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:

用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()的用法

js创建与追加元素

标签:

原文地址:http://www.cnblogs.com/wbengineer/p/4709605.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!