一、原生JS获取DOM节点
获取节点的方式大致分querySelector系列和getElementsBy 系列，两种：querySelectorAll 属于 W3C 中的 Selectors API 规范 [1]。而 getElementsBy 系列则属于 W3C 的 DOM 规范 [2]。
querySelector 系列接收的参数是一个 CSS 选择符。而 getElementsBy 系列接收的参数只能是单一的className、tagName 和 name
1、getElementById() 方法，根据唯一节点的ID属性获取节点对象，如id=“ID”
demo：var element=document.getElementById("ID");
2、getElementsByTagName() 方法，根据节点的标签获取节点对象（返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）），如div标签
demo：var element=document.getElementsByTagName("div");
3、getElementsByClassName()方法，根据节点的类名获取节点对象（返回包含带有指定类名的所有元素的节点列表），如class=“class”
demo：var element=document.getElementsByClassName("class");
4、querySelector()方法，根据一个唯一的带有ID或class属性或HTML标签的元素获取节点对象（仅返回匹配指定选择器的第一个元素），如id="iddemo"
demo：var element=document.querySelector("#iddemo");
获取class=“a”的第一个p元素
var element=document.querySelector("p.a");
获取第一个带target的a元素
var element=document.querySelector("a[target]");
5、querySelectorAll()方法，返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList ，若某些元素class=“selectors”
demo：var elementtList = document.querySelectorAll("selectors");
二、JS增加节点
以下内容转载于https://blog.csdn.net/LLL_liuhui/article/details/79901101
1、createElement() 创建元素节点
var element=document.createElement(‘元素名’);
2、crateTextNode() 创建文本节点
var txt=document.crateTextNode(‘文本内容’);
3、createAttribute() 创建属性节点
var attr=document.createAttribute(‘属性名’);
attr.value=’属性值’;
4、appendChild() 方法向节点添加最后一个子节点
如下：
<div id="box" class="classa">
<p id="p1">这是一个段落</p>
</div>
<script>
var box=document.getElementById("box");
var p2=document.createElement("p"); //创建元素节点
var txt=document.createTextNode("这是另一个段落"); //创建文本节点
p2.appendChild(txt); //把创建的文本节点追加到元素节点中
var attr=document.createAttribute("id"); //创建属性节点
attr.value="p2"; //给属性节点设置值
p2.setAttributeNode(attr); //给元素设置属性节点
box.appendChild(p2); //把创建的p元素追加到box最后
console.log(box);
</script>
结果如下：
<div id="box" class="classa">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>
5、insertBefore() 在指定的子节点之前插入新的子节点
parent.insertBefore(newChild,oldChild);
如下：
<div id="box">
<p id="p1">这是一个段落</p>
</div>
<script>
var box=document.getElementById("box");
var p1=document.getElementById("p1");
var p0=document.createElement("p");
var txt=document.createTextNode("这是一个段落");
p0.appendChild(txt);
box.insertBefore(p0,p1);
console.log(box);
</script>
结果如下：
<div id="box">
<p>这是一个新段落</p>
<p id="p1">这是一个段落</p>
</div>
以下内容转载于 https://www.cnblogs.com/rentianyuan/p/4767113.html
一、首先构建一个简单布局，来供下边讲解使用
1、HTML部分代码：
<div id="div1">div1</div>
<div id="div2">div2
<span id="span1">span1</span>
<span id="span2">span2</span>
</div>
<div id="div3">div3
<b id="b1">b1</b>
<b id="b2">b2</b>
</div>
2、JS部分代码：（先把刚才在html中写的几个标签都获取到，此处只在原生JS中用，在JQuery中默认被删除）
var oDiv2 = document.getElementById('div2');
var oSpan2 = document.getElementById('span2');
var oB2 = document.getElementById('b2');
二、原生JS种添加节点一共有2种方法
1、appendChild()
(1)、概念：把要添加的节点添加到指定父级里面的最后面，所以也叫追加
(2)、使用方式：父级节点.appendChild( 要添加的节点 )
(3)、JS代码：
document.onclick = function(){
oDiv2.appendChild(oB2);//将b2追加到div2里面的最后面
}
(4)、图示：
(5)、兼容性：所有浏览器都支持此方法
2、insertBefore()
(1)、概念：把要插入的节点添加到指定父级里面的指定节点之前
(2)、使用方式：父级节点.insertBefore( 要插入的节点，指定节点 )
(3)、JS代码：（注：每执行一次新方法时，上一个方法都会被注释掉，为了易懂，此处注释一次，下面的文章中将不再把注释上一个方法的代码发上来）
document.onclick = function(){
//oDiv2.appendChild(oB2);此处将上一个方法注释
oDiv2.insertBefore(oB2,oSpan2);//将b2插入到div2中的span2前面
}
(4)、图示：
(5)、兼容性：所有浏览器都支持此方法，但是值得注意的是，如果第二个参数节点不存在，在IE和Safari下会把要添加的节点使用appendChild()方法追加到指定父级中，而其他主流浏览器（Firefox、Chrome、Opera等）下会报错，所以在插入节点的时候，需要先判断第二个参数节点是否存在
三、jQuery中添加节点一共有4组方法，每组方法有2种方式
第一组：before()、insertBefore()
第二组：after()、insertAfter()
第三组：prepend()、prependTo()
第四组：append()、appendTo()
1、第一组的before()
(1)、概念：在指定节点的前面添加要添加的节点
(2)、使用方式：指定节点.before( 要添加的节点 )
(3)、JS代码：
先随便导入个jQuery（此时默认上边通过原生JS获取元素的方法的代码已被删除，并且导入jQuery的代码只发一次，后面的文章中不再发）
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
$(document).click(function(){
$('#span2').before( $('#b2') );//在span2的前面添加b2
})
(4)、图示：
(5)、兼容性：所有浏览器都支持此方法
2、第一组的insertBefore()
(1)、概念：把要插入节点插入到指定节点的前面
(2)、使用方式：要插入的节点.insertBefore( 指定节点 )
(3)、JS代码：
$(document).click(function(){
$('#b2').insertBefore( $('#span2') );//将b2插入到span2的前面
})
(4)、图示：
(5)、兼容性：所有浏览器都支持此方法
3、第二组的after()
(1)、概念：把要添加的节点添加到指定节点的后面
(2)、使用方式：指定节点.after( 要添加的节点 )
(3)、JS代码：
$(document).click(function(){
$('#span2').after( $('#b2') );//在span2的后面添加b2
})
(4)、图示：
(5)、兼容性：所有浏览器都支持此方法
4、第二组的insertAfter()
(1)、概念：把要插入的节点插入到指定节点的后面
(2)、使用方式：要插入的节点.insertAfter( 指定节点 )
(3)、JS代码：
$(document).click(function(){
$('#b2').insertAfter( $('#span2') );//将b2插入到span2的后面
})
(4)、图示：
(5)、兼容性：所有浏览器都支持此方法
5、第三组的prepend()
(1)、概念：在指定父级里面的最前面添加指定节点
(2)、使用方式：父级节点.prepend( 要添加的节点 )
(3)、JS代码：
$(document).click(function(){
$('#div2').prepend( $('#b2') );//在div2里面的最前面添加b2
})
(4)、图示：
(5)、兼容性：所有浏览器都支持此方法
6、第三组的prependTo()
(1)、概念：把指定节点添加到指定父级里面的最前面
(2)、使用方式：要添加的节点.prependTo( 父级节点 )
(3)、JS代码：
$(document).click(function(){
$('#b2').prependTo( $('#div2') );//将b2添加到div2里面的最前面
})
(4)、图示：
(5)、兼容性：所有浏览器都支持此方法
7、第四组的append()（注：此方法基本等同于原生JS的appendChild方法）
(1)、概念：在指定父级里面的最后面添加指定节点
(2)、使用方式：父级节点.append( 要添加的节点 )
(3)、JS代码：
$(document).click(function(){
$('#div2').append( $('#b2') );//在div2里面的最后面添加b2
})
(4)、图示：
(5)、兼容性：所有浏览器都支持此方法
8、第四组的appendTo()
(1)、概念：把指定节点添加到指定父级里面的最后面
(2)、使用方式：要添加的节点.appendTo( 父级节点 )
(3)、JS代码：
$(document).click(function(){
$('#b2').appendTo( $('#div2') );//把b2添加到div2里面的最后面
})
(4)、图示：
(5)、兼容性：所有浏览器都支持此方法
四、JQuery中添加节点的4组方法每组之间的区别
1、发现问题：眼尖的朋友不难发现，jquery这4组添加节点的方法，每组的2种方法达到的效果几乎都差不多，那么他们到底有什么不同呢？我来拿举个例子大家就清楚了
2、举例说明：我们拿第四组来当例子，现在我要将刚才的JS代码做一些修改，在后边用css方法添加背景色
3、给用append()方法的代码加css方法
(1)、JS代码：
$(document).click(function(){
$('#div2').append( $('#b2') ).css('background','red');//在div2里面的最后面添加b2，并给返回来的jquery对象加背景色
})
(2)、图示：
4、给用appendTo()方法的代码加css方法
(1)、JS代码：
$(document).click(function(){
$('#b2').appendTo( $('#div2') ).css('background','red');//把b2添加到div2里面的最后面，并给返回来的jquery对象加背景色
})
(2)、图示：
