一、原生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)、圖示：
