JS对HTML DOM元素的增删改查

**

1.增：

**
①createElement ： 创建一个新的HTML元素（节点）；

var p = document.createElement("p");

②createTextNode : 创建一个新的文本节点；

var ptext = document.createTextNode("这是一个文本节点。");

③appendChild : 给所选的目标元素末尾添加插入节点（或者给目标元素添加插入文本节点），也可以添加已经存在的元素，会将其元素从原来的位置移到新的位置。；

p.appendChild(ptext);//添加文本节点

/*目标元素末尾插入节点*/
var divnow = document.getElementById("divnow");//选取目标元素
divnow.appendChild(p);/*末尾插入节点*/

divnow.appendChild(divnow.firstChild); //把divnow的第一个元素节点移到divnow子节点的末尾

④insertBefore : 给所选的目标元素特定位置添加插入节点

var divnow = document.getElementById("divnow"); //获取到目标元素
var pone = document.getElementById("pone"); //insertBefore的第二个参数，就是说我们要插入的节点在该元素之前
divnow.insertBefore(p, pone);/*p为要插入的节点，pone为在该元素之前插入*/

**

2.删：

**
removeChild : 删除一个所选元素(节点),但是要知道该元素的父元素；

var divnow = document.getElementById("divnow");/*所选元素的父元素*/
var pone = document.getElementById("pone");/*要删除的那个元素*/
divnow.removeChild(pone);

**

3.改：

**
replaceChild : 替换 HTML DOM 中的元素，第一参数是要插入的节点，第二个是要被替换的节点；

var divnow = document.getElementById("divnow");/*获取该元素*/
var pone = document.getElementById("pone");/*被替换的元素*/
divnow.replaceChild(p, pone);

**

4.查找，获取：

**
①
document.getElementById();

var divnow = document.getElementById("divnow");/*括号内为Id名*/

②document.getElementsByTagName();

var p = document.getElementsByTagName("p");/*括号内为标签名*/

③document.getElementsByClassName();

var win = document.getElementsByClassName("win");/*括号内为类名*/

④document.getElementsByName();

var win = document.getElementsByName("win");/*括号内为name名*/