javascript DOM(五)----插入、删除节点?插入节点:1). insertBefore(): 把一个给定节点插入到一个给定元素节
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>??
?
?
?
呵呵，谢谢！已经试了。可以插入在parentNode的最后面。