`

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>
 

 

 

 

 

0
顶
1
踩
分享到：
| javascript DOM(四)----节点替换
评论
2 楼 mousepc 2012-02-03  
dpjok 写道
insertAfter 可以用如下原生函数，楼主不妨测试一下

   parentNode.inertBefore(插入用DOM, null);





呵呵，谢谢！已经试了。可以插入在parentNode的最后面。
1 楼 dpjok 2012-02-03  
insertAfter 可以用如下原生函数，楼主不妨测试一下

   parentNode.inertBefore(插入用DOM, null);




发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScriptDOM编程艺术（第2版）PDF版本下载.txt

    - **插入节点**：使用`appendChild`、`insertBefore`等方法将新创建的节点插入到文档中。 - **删除节点**：使用`removeChild`方法来移除文档中的某个节点。 - **替换节点**：使用`replaceChild`方法来替换文档中的一...

    JavaScript-DOM--:JavaScript DOM编程艺术源代码

    通过JavaScript，我们可以获取这些节点，改变它们的属性，添加或删除子节点，甚至移动节点，从而更新页面内容。 例如，`document.getElementById()`方法是DOM操作的基础，它允许我们通过元素ID找到特定的DOM节点。...

    JavaScript DOM编程艺术【第2版&高清】.pdf

    DOM编程涉及对节点（Node）的查询、插入、删除和修改等操作。DOM操作可以改变网页的内容、结构和样式，是创建动态网页的关键。 4. DOM节点类型：DOM树由各种节点组成，包括元素节点（Element）、文本节点（Text）、...

    DOM应用---遍历网页中的元素

    可以使用`createDocumentFragment`创建一个虚拟DOM，先在此处进行操作，最后再一次性插入到真实DOM中。 8. **实际应用** - 动态加载内容：遍历DOM可以检查新加载的元素，实现动态数据的实时更新。 - 数据绑定：在...

    DOM Scripting.Web.Design.with.JavaScript.and.the.Document.Object.Model(JavaScript DOM编程艺术)

    3. **创建和删除元素**：掌握动态创建新元素、插入到DOM树中，以及删除现有元素的方法，如`createElement`、`appendChild`、`removeChild`等。 4. **属性操作**：学习如何获取和修改元素的属性值，如`getAttribute`...

    经典之作javascript dom编程艺术源码

    JavaScript DOM编程艺术是一本深入解析DOM操作的经典书籍，它的源码提供了丰富的实例，帮助开发者深入理解如何使用原生JavaScript高效地操纵网页元素。DOM（Document Object Model）是HTML和XML文档的标准表示，它将...

    javaScript-DOM编程艺术

    DOM提供了一套API，包括节点操作（如创建、插入、删除节点）、事件处理（如点击、鼠标移动等）、属性访问等。例如，可以使用`appendChild()`方法在元素的末尾添加新子节点，`addEventListener()`来监听和响应用户...

    javascript dom 代码

    - **插入节点**：`appendChild`, `insertBefore`, `replaceChild`等方法用于在DOM树中添加、插入和替换节点。 - **删除节点**：`removeChild`方法用于删除节点。 - **修改节点属性**：通过`.`操作符或`...

    JavaｓｃｒｉｐｔDOM编程视频教程（17讲）

    教程名称：Javaｓｃｒｉｐｔ DOM编程视频教程（17讲） 课程目录：【】1....12. Javaｓｃｒｉｐｔ DOM编程_插入节点及自定义的【】13.JavaｓｃｒｉｐｔDOM编 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。

    JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例

    以上知识点涵盖了文件提供的关于JavaScript中DOM节点插入操作的主要概念和技术细节。掌握这些知识点，能够帮助开发者更有效地在Web页面上动态地添加、删除和修改节点，从而实现更丰富的用户交互和更动态的内容展示。

    JavaScript-DOM.rar_javascript

    2. 插入节点：`appendChild`、`insertBefore`方法用于在现有节点后或前插入新节点；`replaceChild`则用于替换已有的节点。 3. 删除节点：`removeChild`方法可以删除指定的子节点。 4. 更新节点：`innerHTML`属性可以...

    JavaScriptDOM编程艺术

    6. **元素操作**：创建新元素、插入元素、删除元素、替换元素等操作是DOM编程的常见任务。例如，`createElement`、`appendChild`、`insertBefore`、`removeChild`等方法。 7. **属性操作**：通过`getAttribute`和`...

    JavaScript.DOM编程艺术(第2版)附录及源码.rar

    7. **DOM操作**：创建新节点、插入和删除节点、复制和移动节点等，都是DOM编程中的基本操作。 8. **DOM事件委托**：利用事件冒泡或事件捕获机制，可以有效地处理大量元素的事件，提高性能。 9. **DOM性能优化**：...

    JavaScript 动态网页实例 - DOM中的节点操作.rar

    DOM是 Document Object Model的缩写，由W3C进行标准化。文档对象模型(DOM)是一个基础性概念，主要涉及网页页面元素...介绍DOM中的节点操作，主要包括:节点插入与追加、节点复制、节点删除与替换、修改节点内容等知识。

    《javascript-DOM编程艺术》原书代码

    《JavaScript DOM编程艺术》是Jeremy Keith撰写的一本经典著作，主要介绍了如何使用JavaScript与DOM（Document Object Model）进行交互，从而实现网页动态效果和富用户体验。DOM是HTML和XML文档的编程接口，允许我们...

    JavaScript DOM资料 网页制作完全手册

    - 操作DOM主要涉及节点的选择（如getElementById、getElementsByTagname等）、创建（createElement）、插入（appendChild、insertBefore）、删除（removeChild）等方法。 2. **HTML**： - HTML是超文本标记语言，...

    JavaScript DOM编程艺术 附录.pdf

    DOM提供了多种插入节点的方法，包括`appendChild()`和`insertBefore()`。`appendChild()`将一个节点添加到指定父节点的子节点列表的末尾，而`insertBefore()`则将一个节点插入到另一个节点之前： ```javascript // ...

    JavaScript DOM编程

    - 增删改：`createElement`和`createTextNode`用于创建新的节点，`appendChild`、`insertBefore`、`replaceChild`和`removeChild`则用于在文档树中添加、插入、替换和删除节点，`setAttribute`用来设置或修改元素的...

    javascript-dom-exercises-2.3

    这个练习集可能是为了帮助开发者巩固对JavaScript DOM API的理解，特别是如何使用它来修改、添加和删除页面元素。 1. **DOM基本操作**：DOM模型将HTML或XML文档结构化为一棵树形结构，每个节点代表文档的一个部分。...

    记录我的旅程之JavaScript Dom系列里面的所有例题

    通过JavaScript，我们可以利用DOM API来查找、创建、修改和删除这些节点。 在JavaScript中，访问DOM元素有多种方法。例如，`getElementById`用于获取具有特定ID的元素，`getElementsByClassName`和`...

Magicbox
Global site tag (gtag.js) - Google Analytics