一、创建节点：
1、创建元素节点：document.createElement("元素标签名"); 此方法可返回一个 Element 对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>节点的方法</title> </head> <body> <button onclick="addElementNode()">创建元素节点：点我试试看看</button> <script type="text/javascript"> function addElementNode(){
// 创建元素节点 var btn = document.createElement('button'); var con = document.createTextNode('测试'); btn.appendChild(con); document.body.appendChild(btn); } </script> </body> </html>
2、创建属性节点：两种方法，案例如下；
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>节点的方法</title> </head> <style type="text/css"> a { display: block; width: 200px; height: 200px; background: red; } .demo-class{ color: red; } </style> <body> <!--创建属性节点--> <button onclick="addAttrNode(this)">创建属性节点：点我看看</button> <h1>创建属性节点</h1> <script type="text/javascript"> function addAttrNode(obj) { // 用obj.setAttribute() var a = document.createElement('a'); document.body.appendChild(a); a.setAttribute('href', 'http://www.baidu.com'); // 用obj.setAttributeNode()；createAttribute()方法用于创建一个指定名称的属性，并返回Attr 对象属性 var h1=document.getElementsByTagName("H1")[0]; var att=document.createAttribute("class"); att.nodeValue="demo-class"; h1.setAttributeNode(att); } </script> </body> </html>
注释：createAttribute()方法用于创建一个指定名称的属性，并返回Attr 对象属性；
3、创建文本节点
<!--创建文本节点--> <script type="text/javascript"> // 用document.body.innerHTML直接创建 document.body.innerHTML = '<h1>创建文本节点</h1>'; // 用document.createTextNode("文本"); var aa = document.createTextNode("<h2>12345</h2>"); document.body.appendChild(aa); </script>
4、追加的方法：
<!--追加到页面当中--> <ul id="father"> <li class="son1">这是一一一</li> <li class="son2">这是二二二</li> <li class="son3">这是三三三</li> </ul> <script type="text/javascript"> // obj.appendChild; //父对象.insertBefore(要插入的对象,之前的对象); var newItem = document.createElement('li'); var textItem = document.createTextNode('11111111'); newItem.appendChild(textItem); var list = document.getElementById("father") list.insertBefore(newItem, list.childNodes[3]); </script>
注释：
首先请创建一个 LI 节点。
然后创建一个文本节点。
然后向这个 LI 节点追加文本节点。
最后在列表中的首个子节点之前插入此 LI 节点。
PS：我们来了解一下appendChild()方法和insetBefore()方法的区别
appendChild() 方法：可向节点的子节点列表的末尾添加新的子节点。语法：appendChild(newchild)；
insertBefore() 方法：可在已有的子节点前插入一个新的子节点。语法 ：insertBefore(newchild,refchild)；
相同之处：插入子节点 。
不同之处：实现原理方法不同。
appendChild方法是在父级节点中的子节点的末尾添加新的节点（相对于父级节点来说）；
insertBefore 方法 是在已有的节点前添加新的节点（相对于子节点来说的）。
<div class="btns"> <input type="button" value="插入元素" id="creatbtn" /> </div> <div id="box-one"> <p class="con2" id="p1">1</p> <p class="con2">2</p> <p class="con2">3</p> </div> <script type="text/javascript"> window.onload = function() { var btn = document.getElementById("creatbtn"); btn.onclick = function() { insertEle(); } } function insertEle() { var oTest = document.getElementById("box-one"); var newNode = document.createElement("div"); newNode.innerHTML = " This is a newcon "; oTest.appendChild(newNode); // 第一种方法 oTest.insertBefore(newNode, null); // 第二种方法
oTest.insertBefore(newNode, document.getElementById('p1'))；//新建的元素插入到p1元素之前
oTest.insertBefore(newNode,document.getElementById('p1').nextSibling); //新建的元素节点插入到 id为p1后面节点元素的前面， 也就是说插入到id为P1节点元素的后面
} </script>
这里想说的是 nextSibling :某个元素之后紧跟的元素（处于同一树层级中）。
document.getElementById('p1').nextSibling ：取得的是document.getElementById('p1')对象的紧跟着的下一个节点。
previousSibling - 取得某节点的上一个同级节点 。
由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点但是两种情况结合起来发现insertBefore()方法插入节点，是可以在子节点列表的任意位置。
5、删除节点的方法：
<div class="btns"> <input type="button" value="插入元素" id="creatbtn" /> </div> <div id="box-one"> <p class="con2" id="p1">1</p> <p class="con2" id="p2">2</p> <p class="con2" id="p3">3</p> </div> <script type="text/javascript"> // 删除节点 var father = document.getElementById('box-one'); var son1 = document.getElementById('p1'); father.removeChild(son1); son1 = null; </script>
6、修改（替换）节点：父对象.replaceChild(新对象，要替换的对象);
<div class="btns"> <input type="button" value="插入元素" id="creatbtn" /> </div> <div id="box-one"> <p class="con2" id="p1">1</p> <p class="con2" id="p2">2</p> <p class="con2" id="p3">3</p> </div> <!--修改替换节点--> <script type="text/javascript"> var parent = document.getElementById('box-one'); var ele = document.createElement('h1'); ele.className = 'newEle'; ele.innerHTML = '新节点'; var p1 = document.getElementById('p1'); parent.replaceChild(ele, p1); </script>
7、克隆节点：newobj=obj.cloneNode(deep) ；
<div class="btns"> <input type="button" value="插入元素" id="creatbtn" /> </div> <div id="box-one"> <p class="con2" id="p1">1</p> <p class="con2" id="p2">2</p> <p class="con2" id="p3">3</p> </div> <!--克隆节点--> <script type="text/javascript"> var parent = document.getElementById('box-one'); newParent = parent.cloneNode(true); document.body.appendChild(newParent); </script> </body>
注释：
a、cloneNode() 方法创建节点的拷贝，并返回该副本
b、cloneNode() 方法克隆所有属性以及它们的值。
c、如果您需要克隆所有后代，请把 deep 参数设置 true，否则设置为 false。默认是false。
呵呵呵。。。有些方法不只是作用于定义的那些特性，只要符合语法，结合一些属性总会有意想不到的收获。
作为初学者，我懂的不多，或许我的理解还很浅薄，有些可能理解错了，希望看到的能够给我提点下，我不求别的，我只希望在这里记录点点滴滴和吸取大家的建议来促进我的成长。。。。。。。