javascript节点操作可分为5部分：
1.创建节点,createElement();createAttribute();ceateTextNode();
2.插入节点,appendChild();insertBefore();
3.替换节点,replaceChild();
4.删除节点,removeChild();
5.复制节点,cloneNode();
一、创建节点
createElement():
var div=document.createElement("div");//创建一个div
var sty=document.createElement("style");//创建stylecreateAttribute():
var attri=document.createAttribute("color");
attri="red";
console.log(attri);//redcreateTextNode():
var div=document.createElement("div");
var t=document.createTextNode("helloworld");//创建文本节点
div.appendChild(t);
console.log(div.innerHTML);//helloworld二、插入节点
appenChild():
从父节点的末尾添加新的节点。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="div">
<span>第一个子节点</span>
</div>
</body>
<script>
function addNode(){
var div=document.getElementById("div");
var span=document.createElement("span");
span.innerHTML="我是第二个节点"
div.appendChild(span);
console.log(div);
}
addNode();
</script>
</html>运行结果:
insertBefore():
在指定的字节之前添加新节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="div">
<span id="span1">第一个子节点</span>
</div>
</body>
<script>
function addNode(){
var div=document.getElementById("div");
var span1=document.getElementById("span1");
var span2=document.createElement("span");
span2.innerHTML="我是第二个节点"
div.insertBefore(span2,span1);
console.log(div.innerHTML);
}
addNode();
</script>
</html>
运行结果：
三、替换节点
replaceChild();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="div">
<span id="span1">第一个子节点</span>
</div>
</body>
<script>
function addNode(){
var div=document.getElementById("div");
var span1=document.getElementById("span1");
var span2=document.createElement("span");
span2.innerHTML="我是第二个节点"
div.replaceChild(span2,span1);
console.log(div);
}
addNode();
</script>
</html>运行结果：
四、删除节点
removeChild();
删除指定的子节点。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="div">
<span id="span1">第一个子节点</span>
<span>第二个子节点</span>
</div>
</body>
<script>
function addNode(){
var div=document.getElementById("div");
var span1=document.getElementById("span1");
div.removeChild(span1);
console.log(div);
}
addNode();
</script>
</html>运行结果：
五、复制几点
cloneNode();
cloneNode(boolean),这个方法填布尔值参数，不填默认为false;
true时复制该节点的子节点，false则不复制子节点。
当参数为false时：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="div">
<span id="span1">第一个子节点</span>
<span>第二个子节点</span>
</div>
</body>
<script>
function addNode(){
var div=document.getElementById("div");
var div2=div.cloneNode(false);
div.appendChild(div2);
console.log(div.innerHTML);
}
addNode();
</script>
</html>运行结果：
当参数为true时：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="div">
<span id="span1">第一个子节点</span>
<span>第二个子节点</span>
</div>
</body>
<script>
function addNode(){
var div=document.getElementById("div");
var div2=div.cloneNode(true);
div.appendChild(div2);
console.log(div);
}
addNode();
</script>
</html>
运行结果：
