1.在javaScript里刪除節點
在學習中我們只學到了一種刪除DOM節點的方法那就是通過元素的父元素來刪除該元素,但后面我查閱資料發現刪除節點還有其他方法。
1.使用?removeChild()
?方法(最常用)
我們需要獲得元素的父元素,如果不知道可以通過parentNode來獲得
let child = document.getElementById('child-element');// 獲取父節點
let parent = child.parentNode;// 刪除子節點
parent.removeChild(child);
2.使用remove方法,這種方法比較新,可以直接調用,不用找父元素,這種方法較為方便。
const li = document.querySelector('ul li:nth-child(2)')li.remove()//第二個li被刪除
3.用innerHtml可以刪除某元素內的所有子元素,但不刪除自身,那就是直接使其的innerHtml =‘’
const ul = document.querySelector('ul ')ul.innerHTML = ''
4.?使用?replaceChildren()
?方法也可以刪除一個元素的所有子節點,是新出來的功能
2.在js中增加節點
在js中創建節點比較常用的只有document.createElement('標簽名')這一種,但是將新創建的節點插入目標位置有幾種不同的方法如下
1.appendChild()
?—— 在父節點末尾插入這是最常用的一種
const ul = document.querySelector('ul ')const li = document.createElement('li')li.innerHTML = '6'ul.appendChild(li)
2.insertBefore()
?—— 在指定子節點前插入
const ul = document.querySelector('ul ')const li = document.createElement('li')li.innerHTML = '6'ul.appendChild(li,ul.children[2])
3.append()
?/?prepend()
append()是在父節點末尾插入
prepend()在父節點開頭插入
這倆種方法是新出的,在普通瀏覽器也能正常使用
在發展中,插入節點和刪除節點也出了新的函數可以使用我們要與時俱進