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>
删除节点:
1). removeChild(): 从一个给定元素里删除一个子节点
var reference = element.removeChild(node);
返回值是一个指向已被删除的子节点的引用指针. 某个节点被 removeChild() 方法删除时, 这个节点所包含的所有子节点将同时被删除.
如果想删除某个节点, 但不知道它的父节点是哪一个, parentNode 属性可以帮忙。
<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 节点添加一个 click 响应函数, 从文档中删除自己
var liNodes = document.getElementsByTagName("li");
for(var i = 0; i < liNodes.length; i++){
liNodes[i].onclick = function(){
this.parentNode.removeChild(this);
};
}
};
</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> innerHTML属性:
1). 浏览器几乎都支持该属性, 但不是 DOM 标准的组成部分. innerHTML 属性可以用来读, 写某给定元素里的 HTML 内容
<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. 获取 city 节点中的内容
var cityNode = document.getElementById("city");
alert(cityNode.innerHTML);
//2. 把 city 节点中内容换为 #game 节点的内容
cityNode.innerHTML = document.getElementById("game").innerHTML;
};
</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>