`

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);




发表评论

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

相关推荐

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

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

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

    主要介绍了JS实现DOM节点插入操作之子节点与兄弟节点插入操作,涉及JavaScript节点的创建、添加简单操作技巧,需要的朋友可以参考下

    JS实现的DOM插入节点操作示例

    本文实例讲述了JS实现的DOM插入节点操作。分享给大家供大家参考，具体如下： 一 介绍 插入节点通过使用insertBefore()方法来实现。 insertBefore()方法将在另一个子节点前插入新的子节点。 obj.insertBefore(new,ref...

    dom-insert:DOM 插入方法

    dom-插入 DOM 插入方法。 安装 npm install dom-insert 应用程序接口 可用方法： after(element, content) : 在后面插入内容。 before(element, content) : 在前面插入内容。 append(element, content) : 追加...

    JS常见DOM节点操作示例【创建 ，插入，删除，复制，查找】

    主要介绍了JS常见DOM节点操作,结合实例形式分析了JavaScript针对DOM节点的创建 ，插入，删除，复制，查找等操作相关函数与使用技巧,需要的朋友可以参考下

    JavaScript之DOM插入更新删除_动力节点Java学院整理

    JavaScript之DOM插入更新删除，供大家参考，具体内容如下 更新 拿到一个DOM节点后，我们可以对它进行更新。 可以直接修改节点的文本，方法有两种： 一种是修改innerHTML属性，这个方式非常强大，不但可以修改一...

    创建并插入dom节点bootcamp-prep-000

    创建和插入DOM节点目标在本课程结束时，您将能够以编程方式创建DOM元素将元素插入DOM 从DOM中删除元素本课程是一门代码-学习将期望看到对文件内容所做的更改以注册完成。 继续进行操作，然后复制并粘贴代码段。...

    javascript将DOM节点添加到文档的方法实例分析

    主要介绍了javascript将DOM节点添加到文档的方法,对比分析了javascript的两种节点创建的方法,涉及javascript节点操作及运行时间计算的相关技巧,需要的朋友可以参考下

    :scissors:跨DOM节点截断文本-JavaScript开发

    shear.js shear.js是一个零依赖的...无需将目标元素设置为块级元素的功能，即可在目标元素内的dom节点之间截断，保持目标元素内的原始dom节点在截断零依赖项末尾插入html字符串，非常轻巧（1.9kb）浏览器支持IE

    phase-0-the-dom-modifying-elements-lab

    创建和插入DOM节点实验学习目标以编程方式创建DOM元素向DOM添加元素使用innerHTML更新元素更改DOM节点上的属性从DOM中删除元素介绍现在您已经了解了DOM和用于选择正确元素的强大工具，现在该学习如何：创建新节点，...

    JavaScript(四)：JavaScript版的DOM总结

    属性 ： value，style ，width2、DOM操作1） 单个HTML DOM节点的操作a、找到DOM节点b、DOM修改2）DOM结构的改变a、添加节点b、移除节点c、插入节点3）显示和隐藏 DOM总结 跟着老师从HTML入门，对CSS有了初步了解，再...

    JavaScript操作HTML DOM节点的基础教程

    主要介绍了JavaScript操作HTML DOM节点的基础入门教程,包括对节点的创建修改删除等操作,还特别提到了其中appendChild()与insertBefore()插入节点时需注意的问题,需要的朋友可以参考下

    domhide.js:隐藏和显示 DOM 节点的小型快速实用程序

    Tag 的 innerHTML 属性作为注释节点插入回 DOM。 为了扭转这一点，为了揭示标签的内部结构，评论节点值作为 HTML 插入回，评论节点本身被删除。 为了在隐藏期间保留尺寸（如果标签的尺寸是可变的并且取决于内部...

    dom-collection:DOM元素子节点的基于索引的集合操作方法

    DOM 元素子节点的基于索引的集合操作方法。 应用程序接口 insertAt（元素，索引，父） 在特定索引处插入 DOM 元素。 moveAt（元素，索引，父） 将 DOM 元素移动到特定索引。 replaceAt（元素，索引，父） 替换...

    Js 获取HTML DOM节点元素的方法小结

    令人欣慰的是，使用JavaScript获取节点的方法有很多种，这里简单做一下总结（以下方法在IE7和Firefox2.0.0.11测试通过）1. 通过顶层document节点获取： （1） document.getElementById(elementId) ：该方法通过节点...

    JavaScript节点及列表操作实例小结

    本文实例总结了JavaScript节点及列表操作的方法。分享给大家供大家参考。具体如下： （1）创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建...

    JavaScript笔记

    JavaScript：定义行为和动作 (基于对象和事件驱动的客户端脚本语言；也是一种广泛应用于客户端Web开发的脚本语言) 基于对象：网页中的一切元素都是假象！不需要new，即可直接使用 事件驱动：JavaScript的执行都是...

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