js复制/添加节点

<script>
/*
	cloneNode()方法可以复制一个节点，该方法能够给节点创建一个副本。
	var ele = node.cloneNode(deep);
		deep是一个逻辑值：
			参数值为true时，复制的节点将包含多有子节点内容；
			参数值为false时，赋值的节点仅包含指定对象本身，不包含任何子节点。如果被复制的节点时一个元素节点，
		其包含的所有文本将不会被父子，因为这些文本是一个节点，但是属性节点将被复制。
	cloneNode()方法复制的新节点与被复制节点具有一样的nodeName和nodeType属性
*/
window.onload = function() {
	var p = document.createElement("p");
	var p1 = p.cloneNode(false);
	var info = "nodeName: " + p1.nodeName;
	info += ", nodeType: " + p1.nodeType;
	alert(info);//nodeName: P, nodeType: 1
} 
</script>

<script>
window.onload = function() {
	var p = document.createElement("p");
	var h1 = document.createElement("h1");
	var txt = document.createTextNode("Hello world");
	var hello = txt.cloneNode(false);		//克隆创建的文本节点
	p.appendChild(hello);
	h1.appendChild(p);
	document.body.appendChild(h1);			//把标题节点增加到body中
	//此时调用复制文本节点的nodeName和nodeType，返回值分别是3和#text
}
</script>

<script>
/*
	在文档中添加节点：
		var new_e = ele.appendChild(new_e);将新创建的节点插入到谋者指定的元素下。将new_e添加到
	ele元素下，并返回new_e的引用。
		该方法常常与createElement()和createTextNode()方法配合使用。
*/
window.onload = function() {
	var p = document.createElement("p");
	var txt = document.createTextNode("盒子模型");
	p.appendChild(txt);
	document.getElementById("box").appendChild(p);
}
</script>
</head>

<body>
<div id="box"></div>
<!--
<div id="box">
	<p>盒子模型</p>
</div>
-->
</body>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#red{
	border:solid 1px red;
}

#blue {
	border: solid 1px blue;
}	
</style>
<script>
/*
	appendChild()还有一个比较特殊的用法，移动文档中现有的元素的位置。
*/
window.onload = function() {
	var ok = document.getElementById("ok");
	ok.onclick = function() {
		var red = document.getElementById("red");
		var blue = document.getElementById("blue");
		blue.appendChild(red);	
		//当点击移动按钮的时候，将蓝盒子移动到红盒子里面
		//通过查看网页元素，可以看出其实是修改了原文档代码中盒子的包含关系
		//而且，移动的是指定节点包含的所有子节点
	}	
}
</script>
</head>

<body>
<div id="red"><h1>红盒子</h1>
	</br></br>
</div>
</br>
<div id="blue">蓝盒子
	</br></br>
</div>
<button id="ok">移动</button>
</body>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{
	margin: 1em;
}
#red{
	border: solid 1px red;
}
#blue{
	border: solid 1px blue;
}
</style>
<script>
window.onload = function(){
	var ok = document.getElementById("ok");	
	ok.onclick = function() {
		var h1 = document.getElementsByTagName("h1")[0];
		var blue = document.getElementById("blue");
		var red = document.getElementById("red");
		//首先用蓝盒子替换掉红盒子里面的一级标题
		var del_h1 = red.replaceChild(blue, h1); //获得替换掉的一级标题
		//将替换掉的一级插到红盒子前面
		red.parentNode.insertBefore(del_h1, red);
	}
}
</script>
</head>

<body>
<div id="red">
	<h1>红盒子</h1>
</div>
<div id="blue">
	蓝盒子
</div>
<button id="ok">替换</button>
</body>

猜你喜欢