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>
運行結果：
