js appendChild與insertBefore 區別和用法
阿新 • • 發佈:2019-03-20
child 內容 增加 位置 tel 代碼 creat for nod
1.appendChild() 方法:可以向節點的子節點列表的末尾添加新的子節點。
比如:appendChild(newchild)括號裏可以是創建的標簽var newchild = document.createElement
2.insertBefore() 方法:
可在已有的字節點前中插入一個新的子節點。比如:insertBefore(newchild,rechild)
參數:
newnode: 要插入的新節點。
node: 指定此節點前插入節點
3.相同之處:插入子節點。
4.不同之處:appendChild方法是在父節點中的字節點的末尾添加新的節點(相對於父節點來說)。
insertBefor方法是在已有的節點前添加新的節點(相對於子節點來說的)
HTML代碼:
<input type="button" value="增加" id="btn" /> <ul id="ul"> <li>第一個</li> <li>第二個</li> </ul>
JS 代碼:
my$("btn").onclick = function () { //創建一個元素標簽 var li = document.createElement(‘li‘); //給元素設置內容 li.innerText = (‘新增一個內容‘);// 在父元素的後面添加 my$(‘ul‘).appendChild(li); } my$("btn").onclick = function () { //創建一個元素標簽 var li = document.createElement(‘li‘); //給元素設置內容 li.innerText = (‘新增一個內容‘); // setInnnerText(li,‘增加的‘); my$(‘ul‘).insertBefore(li, my$(‘ul‘).lastElementChild);//第一個參數 添加的內容 第二個參數是在那個位置前面 添加 }
js appendChild與insertBefore 區別和用法