您的位置：首页 > Web前端 > JavaScript

JavaScript的DOM编程--11--插入节点

2015-09-25 18:21 567 查看

插入节点:
1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode,targetNode);
节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是 element 元素的一个子节点。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插入节点</title>
<script type="text/javascript">
//测试 insertBefore() 插入节点
//该方法除了进行插入外, 还有移动节点的功能.
window.onload=function(){
//1. 把 #rl 插入到  #bj 节点的前面
var cityNode=document.getElementById("city");
var bjNode=document.getElementById("bj");
var rlNode=document.getElementById("rl");

alert("测试开始了")
//cityNode.insertBefore(rlNode,bjNode);//(新，目标节点)

//测试方法
var refNode = document.getElementById("dj");
insetAfter(rlNode,refNode);
}

//写一个insetAfter方法/把 newNode 插入到 refNode 的后面
function insetAfter(newNode,refNode){
//1. 测试 refNode 是否为其父节点的最后一个子节点
var parentNode=refNode.parentNode;
if(parentNode){
var lastNode=parentNode.lastChild;
//2. 若是: 直接把 newNode 插入为 refNode 父节点的最后一个子节点
if(refNode==lastNode){
parentNode.appendChild(newNode);
}

//3. 若不是: 获取 refNode 的下一个兄弟节点, 然后插入到其下一个兄弟节点的前面.
else{
var nextNode=refNode.nextSibling;
parentNode.insertBefore(newNode,nextNode);
}
}
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city"><li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li id="dj">东京</li>
<li id="se">首尔</li>
</ul>

<br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>

<br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female

<br><br>
name: <input type="text" name="username" value="atguigu"/>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航