js添加、删除DOM元素

js添加、删除DOM元素

通过demo来熟悉js添加、删除DOM元素，下面是html代码以及在浏览器中的效果：

• HTML

<ul class="list">
	<li class="item">1</li>
	<li class="item">2</li>
	<li class="item">3</li>
</ul>

效果：

添加DOM元素：

1、appendChild()方法

该方法添加的元素位于父元素的末尾，使用方法：

parentNode.appenChild(NewNode) // parentNode是需要添加元素的容器，NewNode是新添加的元素

创建一个li元素并添加到ul的末尾：

const ulNode = document.querySelectorAll('.list')[0],
	  liNode = document.createElement('li');
liNode.className = 'item';
liNode.innerHTML = 4;
ulNode.appendChild(liNode);

效果：

2、insertBefore()方法

该方法可以将元素添加到指定位置，使用方法：

// parentNode是需要添加元素的容器，NewNode是新添加的元素, beforeNode是添加在哪个元素之前
parentNode.insertBefore(newNode, beforeNode) 

创建一个li元素并添加在第二个li元素之前：

const ulNode = document.querySelectorAll('.list')[0],
	  liNodes = document.querySelectorAll('.item'),
	  liNode = document.createElement('li');
liNode.className = 'item';
liNode.innerHTML = 4;
ulNode.insertBefore(liNode, liNodes[1]);

效果：

删除DOM元素：

removeChid()方法

该方法用于删除指定元素，使用方法：

parentNode.removeChild(removeNode) // parentNode是需要删除元素的容器，removeNode是要删除的元素

删除第二个li元素：

const ulNode = document.querySelectorAll('.list')[0],
	  liNodes = document.querySelectorAll('.item');
ulNode.removeChild(liNodes[1]);

效果：