javascript DOM(5)-插入、删除节点
日期：2014-05-16 浏览次数：20328 次
javascript DOM(五)----插入、删除节点
?
插入节点:
1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
? var reference = ?element.insertBefore(newNode,targetNode);
? ? ? ? ?节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是 element 元素的一个子节点。 ?
? ? 2). 自定义 insertAfter() 方法 ? ??
? ? /**
* 将 newChild 插入到 refChild 的后边
* @param {Object} newChild
* @param {Object} refChild
*/
function insertAfter(newChild, refChild){
var refParentNode = refChild.parentNode;
//判断 refChild 是否存在父节点
if(refParentNode){
//判断 refChild 节点是否为其父节点的最后一个子节点
if(refChild == refParentNode.lastChild){
refParentNode.appendChild(newChild);
}else{
refParentNode.insertBefore(newChild, refChild.nextSibling);
}
}
}
?
代码:
?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
window.onload = function(){
//1. 新建一个 "<li>伦敦</li>", 并将该节点添加到 #dj 的前边
var ld = document.createElement("li");
ld.appendChild(document.createTextNode("伦敦"));
document.getElementById("city").insertBefore(ld, document.getElementById("dj"));
//2. 新建一个 "<li>纽约</li>", 并将该节点添加到 #dj 的后边
var ny = document.createElement("li");
ny.appendChild(document.createTextNode("纽约"));
insertAfter(ny, document.getElementById("dj"));
//3. 新建一个 "<li>芝加哥</li>", 并将该节点添加到 "首尔" 节点的后边
var zjg = document.createElement("li");
zjg.appendChild(document.createTextNode("芝加哥"));
insertAfter(zjg, document.getElementById("city").lastChild);
};
/**
* 把 newChild 放到 targetChild 节点的后边
* @param {Object} newChild
* @param {Object} targetChild
*/
function insertAfter(newChild, targetChild){
//1. 获取 targetChild 的父节点
var parentNode = targetChild.parentNode;
//2. 判断 targetChild 节点是否为其父节点的最后一个子节点
if(parentNode){
//3. 若是最后一个子节点: 则直接把 newChild 加为 targetChild 父节点的子节点即可
if(parentNode.lastChild == targetChild){
parentNode.appendChild(newChild);
}
//4. 若不是最后一个子节点: 则先获取 targetChild 节点的下一个兄弟节点, 然后调用 insertBefore() 方法
else{
parentNode.insertBefore(newChild, targetChild.nextSibling);
}
}
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li id="dj">东京</li>
<li>首尔</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
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
