JS：添加与删除元素

马黑黑 · 发表于 2022-7-12 12:08

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

JS长于DOM操作，添加、删除元素就是基于DOM节点而发起的操作，是JS的工作长项之一。DOM就是document，DOM由诸多的节点以各种方式组成，节点的构成单元则是诸如 body、div、img、table、span、p、input等等之类的HTML实体元素，个别浏览器也会将非HTML元素的实体或非实体的东西（如空白、文本个体等）视为节点。

添加元素，可以使用 element.appendChild(ele) 方法，element 是父元素，即要在其上添加子元素的宿主；ele 参数是待添加的子元素。假设有如下HTML结构（后面各例均使用此结构）：

<div class="papa"></div>

现在，div 里面啥也没有，我们现在的任务是给它添加一张图片，图片的class（类）名称为 mypic :

let papa = document.querySelector('.papa'); //获得宿主元素操作句柄
let img = docuement.createElement('img'); //声明待添加的元素种类等号前的 img 是变量，等号后的 img 是元素类别
img.src = '图片地址'; //给出图片地址
img.alt = ''; //alt 属性是标准 img 标签所必须的
img.className = 'mypic'; // class="mypic"
papa.appendChild(img); //宿主元素追加子元素 img（此处img和上面两行一样，是变量）

这就在 div 里添加了一张图片，所用到的HTML元素标签是 img 标签。以上的操作等效于：

let str = "<img src='图片地址' class='mypic' alt='' />";
document.querySelector('.papa').innerHTML = src;

就是说，除了使用 append 方式，添加元素的方式还有宿主元素的 innerHTML 等方法，使用哪一种可根据应用场景选择。一般地，append 方法永远是在原有基础上追加，亦即宿主元素原有的子元素不会被破坏，新添加的子元素总是在后面追加，而 innerHTML 方法，一不小心就会清空原有的所有子元素，使用时要格外留意，可以使用 += 方式，这里，+= 表示在原有基础上进行HTML字串追加。

删除元素所使用的JS方法是 removeChild，语法与 appendChild 一样：

element.removeChild(ele);

element 是宿主元素，ele 是待操作即要删除的子元素（操作句柄）。删除指定子元素方法非常简单，还是以上面的HTML结构为例，将已添加的图片删除掉，可以这样操作：

let myImg = document.querySelector('.mypic');
if(myImg) papa.removeChild(myImg);

第一句，是获得图片的操作句柄，第二句用了一个 if 语句，如果 myImg 存在（不存在返回空，即 null，反之，如果存在返回元素自身），则从父元素中将其删掉。

有时候我们不一定要知道待删除子元素的id或类名（class），我们只想将宿主元素内的所有子元素统统删掉，最简单有效的方法是清空 innerHTML：

element.innerHTML = '';

这样，宿主元素 element 内的所有子元素及其子元素可能拥有的子元素、子子元素、子子子元素等等等等一概端走。

用 removeChild 方法当然也能做到，麻烦一些。同样以前面的HTML结构为例：

let sons = papa.children;
for(son of sons) papa.removeChild(son);

children 是 child 的复数，children 属性指向父元素的第一层子元素，返回一个数组（例中赋值给了变量sons）。然后我们通过 for of 语句用 removeChild 方法将子元素逐一删除。此法虽然麻烦一些，但在有针对性删除子元素比如只删除 span 标签时，这将有操作空间，而 innerHTML 的方法只能一揽子搞掉所有的子元素和子元素可能附带的所有节点。

二楼给出一个添加与删除子元素的实用例子，代码放在三楼。