之前我们讲解过如何创建新节点。创建的新节点如果想发挥作用,必需添加到DOM(html文档)。那么怎么把创建好的节点添加dom中呢,这就是我们现在要研究的话题。
javascript提供了两种添加节点的方法:
| 方法 | 说明 |
|---|---|
| insertBefore() | 在指定节点的前面插入新节点 |
| appendChild() | 在指定节点的最后插入新的子节点(原来的子节点不变) |
insertBefore()
insertBefore() 方法可以在指定节点的前面插入新节点。
语法:parentNode.insertBefore(newnode , thisNode)
参数/返回值说明:
| 参数/返回值 | 说明 |
|---|---|
| parentNode | 父节点 |
| newNode | 将要添加的新节点 |
| thisNode | 当前节点(指定节点) |
| 返回值 | 插入成功返回 true ,失败返回 false |
例如,在 id="dome" 的节点前面添加节点的语句为:
var ele_div=document.createElement("div"); var thisNode=document.getElementById("demo"); this.parentNode.insertBefore(ele_div , thisNode);
注意:insertBefore() 是当前节点的父节点的一个方法,添加节点时,不但要知道当前节点,还要知道当前节点的父节点。一般情况下,可以通过 thisNode.parentNode 来获取父节点。
举例,在指定节点前面不断增加新节点:
<div id="demo"> <div id="thisNode">点击这里添加新节点</div> </div> <script type="text/JavaScript"> document.getElementById("thisNode").onclick=function(){ var ele_div=document.createElement("div"); var ele_text=document.createTextNode("这是新节点"); ele_div.appendChild(ele_text); this.parentNode.insertBefore(ele_div , this); } </script>



网友评论文明上网理性发言 已有0人参与
发表评论: