版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/cheng_cuo_tuo/article/details/86657207
<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>