在javaScript里删除节点以及添加节点

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（）在父节点开头插入

这俩种方法是新出的，在普通浏览器也能正常使用

在发展中，插入节点和删除节点也出了新的函数可以使用我们要与时俱进