JS--JavaScript节点插入、删除、替换、克隆(appendChild、cloneNode、insertBefore、normalize、removeChild、replaceChild)

最新推荐文章于 2023-01-09 01:38:14 发布

吴声子夜歌最新推荐文章于 2023-01-09 01:38:14 发布

Node类型为所有节点定义了很多原型方法，以方便对节点进行操作，其中获得所有浏览器一致支持的方法如下表：
Node类型原型方法说明：

方法	说明
appendChild()	向节点的子节点列表的结尾添加新的子节点
cloneNode()	复制节点
hasChildNodes()	判断当前节点是否拥有子节点
insertBefore()	在指定的子节点前插入新的子节点
normalize()	合并相邻的Text节点并删除空的Text节点
removeChild()	删除（并返回）当前节点的指定子节点
replaceChild()	用新节点替换一个子节点

其中，appendChild()、insertBefore()、removeChild()、replaceChild()方法用于对子节点进行添加、删除和复制操作。要使用这几个方法必须先取得父节点，可以使用parentNode属性。另外，并不是所有类型的节点都又子节点，如果不支持子节点的节点上调用了这些方法将会导致错误发生。

appendChild():

appendChild(newchild)//newchild表示新添加的节点对象，并返回新增的节点
示例：将段落文本增加到指定的div元素中，使它成为当前节点的最后一个子节点 
<!DOCTYPE html>
		<meta charset="UTF-8">
		<title></title>
	</head>
		<div id="box"></div>
		<script>
			var p = document.createElement("p"); //创建段落节点
			var txt = document.createTextNode("盒子模型"); //创建文本节点
			p.appendChild(txt); //把文本节点增加到段落节点中
			document.getElementById("box").appendChild(p);//添加到div
		</script>
	</body>
</html>

 如果文档树种已经存在参数节点，则将从文档树中删除，然后重新插入新的位置。如果添加的节点是DocumentFragment节点，则不会直接插入，而是把它的子节点按顺序插入当前节点的末尾。
 将元素添加到文档中，浏览器会立即呈现该元素。此后，对这个元素所作的任何修改都会实时反应在浏览器中。 
示例：新建两个盒子和一个按钮，点击按钮执行插入操作 
<!DOCTYPE html>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{ margin:lem;}
			#red {border:solid 1px red;}
			#blue {border:solid 1px blue;}
		</style>
	</head>
		<div id="red">
			<h1>红盒子</h1>
		</div>
		<div id="blue">蓝盒子</div>
		<button id="ok">移动</button>
		<script>
			var ok = document.getElementById("ok");
			ok.onclick = function(){
				var red = document.getElementById("red");
				var blue = document.getElementById("blue");
				blue.appendChild(red);
		</script>
	</body>
</html>
insertBefore()： 
insertBefore(newChild, refchild)//newchild表示插入新的节点，refchild表示在此节点前插入新的节点，返回新的子节点
示例：依然使用上一个示例，如果把蓝盒子移动到红盒子所包含的< h1 >标题元素前面，使用appendChild()是无法实现的，此时应该使用insertBefore() 
<script>
	var ok = document.getElementById("ok");
	ok.onclick = function(){
		var red = document.getElementById("red");
		var blue = document.getElementById("blue");
		var h1 = document.getElementsByTagName("h1")[0];
		red.insertBefore(blue, h1);
</script>
注意：insertBefore()方法与appendChild()方法一样，可以把指定元素及其所包含的所有子元素都一起插入到指定位置中。同时会先删除移动的元素，然后再重新插入到新的位置。 
删除节点：remoceChild()
 
nodeObject.removeChild(node)//node为要删除的节点，如果删除成功，返回被删除的节点；失败则返回null
注意：当使用removeChild()方法删除节点时，该节点所包含的所有子节点将同时被删除。 
示例：单击按钮，删除红盒子中的< h1 > 标题 
<!DOCTYPE html>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{ margin:lem;}
			#red {border:solid 1px red;}
			#blue {border:solid 1px blue;}
		</style>
	</head>
		<div id="red">
			<h1>红盒子</h1>
		</div>
		<div id="blue">蓝盒子</div>
		<button id="ok">移动</button>
		<script>
			var ok = document.getElementById("ok");
			ok.onclick = function(){
				var red = document.getElementById("red");
				var h1 = document.getElementsByTagName("h1")[0];
				red.removeChild(h1);
		</script>
	</body>
</html>

 封装一个删除指定节点下所有子节点的函数： 
function empty(e){//e,要被删除的子节点的父节点
	while(e.firstChild){
		e.removeChild(e.firstChild);
替换节点：replaceChild()
 
nodeObject.replaceChild(new_node, old_node)
//new_node新的节点，old_node被替换的节点
//替换成功返回被替换的节点，失败则返回null
示例：用一个< h2 > 标题替换红盒子中的 < h1 >标题 
<!DOCTYPE html>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{ margin:lem;}
			#red {border:solid 1px red;}
			#blue {border:solid 1px blue;}
		</style>
	</head>
		<div id="red">
			<h1>红盒子</h1>
		</div>
		<div id="blue">蓝盒子</div>
		<button id="ok">替换</button>
		<script>
			var ok = document.getElementById("ok");
			ok.onclick = function(){
				var red = document.getElementById("red");
				var h1 = document.getElementsByTagName("h1")[0];
				var h2 = document.createElement("h2");
				var txt = document.createTextNode("二级标题");
				h2.appendChild(txt);
				red.replaceChild(h2, h1);
		</script>
	</body>
</html>

 如果替换节点还包含子节点，则子节点将一同被插入到被替换的节点中。可以借助replaceChild()方法在文档中使用现有的节点替换另一个存在的节点。 
nodeObject.cloneNode(include_all)
//include_all为布尔值，如果为true，那么将克隆原节点，以及所有子节点；为false时，仅复制节点本身
//复制后返回的节点副本属于文档所有，但并没有为它指定父节点，需要通过appendChild()、insertBefore()或replaceChild()方法将它添加到文档中
注意：cloneNode()方法不会复制添加到DOM节点中的Javascript属性，如事件处理程序等。这个方法只复制HTML特性或子节点，其他一切都不会复制。IE在此存在一个bug，即它会复制事件处理程序，所以建议在复制之间最好先移除事件处理程序。 
示例：复制一个节点及所有包含的子节点。复制创建的 < h1 >标题，该节点所包含的子节点及文本节点都将复制过来，然后把它增加到body元素的尾部。 
var p = document.createElement("p");//创建一个p元素
var h1 = document.createElement("h1");//创建一个h1元素
var txt = document.createTextNode("Hello World");//创建文本节点
p.appendChild(txt);
h1.appendChild(p);
document.body.appendChild(h1);//把h1添加到body中
var new_h1 = h1.cloneNode(true);
document.body.appendChild(new_h1);
注意：由于复制的节点会包含原节点的所有特性，如果原节点中包含id属性，就会出现id重复的情况。一般情况下，在同一个文档中，不同元素的id属性值应该不同。为了避免潜在冲突，应该修改其中某个节点的id属性值。
                    JS--JavaScript节点插入、删除、替换、克隆(appendChild、cloneNode、insertBefore、normalize、removeChild、replaceChild)
                    操作节点Node类型为所有节点定义了很多原型方法，以方便对节点进行操作，其中获得所有浏览器一致支持的方法如下表：Node类型原型方法说明：方法说明appendChild()向节点的子节点列表的结尾添加新的子节点cloneNode()复制节点hasChildNodes()判断当前节点是否拥有子节点insertBefore()在指定的子节点前插入新的...
				文章目录前言appendChild(newchild)insertBefore(newchild, refchild)参考资料
在html中，如果需要动态的插入数据标签(li、a等)，则需要使用到标题所示的appendChild()或insertBefore()来实现。
这两种方法都具有插入新元素至指定的容器中的功能，但他们却有很大的区别。
appendChild(newchild)
appendChild()的字面意思append和child，从起名中可以看出，插入元素的位置为末尾。
向当前节点的
				DOM提供了insertBefore()方法，可以在某一个节点前面插入节点，但有时候需要在某一个节点后面插入节点，这就是insertAfter()方法。（From：JavaScript DOM编程艺术）
函数名：insertAfter()
参数：newElement：要添加的节点，targetElement：目标节点
1 function insertAfter(newElem...
				appendChild(Node)这个方法一般是在指定元素节点的最后一个子节点之后添加节点，但如果Node是页面中的DOM对象，那么就不是添加节点了，就是直接Move节点。
     ① 创建原来没有的节点
	window.onload = function(){
		//定义一个快捷方式
		function $(name){
			return
				appendChild 主要是用来追加节点 插入到最后
window.onload = function(){
var ul2 = document.getElementById('ul2');
var oli = document.getElementsByTagName('li');
for(var i=0;i
ul2.appendChild(oli[i]);
				JS里动态创建元素节点：document.createElement(‘标签名’)；
给一个元素追加一个子元素：当前元素.appendChild(子元素);
在指定的元素前插入新的元素：父级.insertBefore(‘新元素’,’当前元素’)；
删除节点（只能在父级下进行操作）:父级.removeChild(‘要删除的节点’);
替换节点：父级.replaceChild(替换的元素,被替换的元素)