论坛 › 马黑黑教程专版 › JS：添加与删除元素

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

JS：添加与删除元素

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 的方法只能一揽子搞掉所有的子元素和子元素可能附带的所有节点。

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

马黑黑 发表于 2022-7-12 12:09

<style>
#papa {
        margin: 50px auto 0;
        width: 600px;
        height: 400px;
        background: #000;
        position: relative;
}
.ball {
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: linear-gradient(60deg,red,white);
}
</style>

<div id="papa"></div>

<script>
let idx = 0, total = 50, gap = 500; //idx:小球标识, total:总数, gap:间隔时间
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
let add = setInterval(addDot, gap), del;
//添加元素
function addDot() {
        let ele = document.createElement('span');
        let ww = papa.offsetWidth, hh = papa.offsetHeight;
        ele.className = 'ball';
        ele.style.left = num(0,ww-20) + 'px';
        ele.style.top = num(0,hh-20) + 'px';
        papa.appendChild(ele);
        idx ++;
        if(idx >= total){
                clearInterval(add);
                idx = 0;
                del = setInterval(delDot, gap);
        }
}
//删除元素
function delDot() {
        let ele = document.querySelector('.ball');
        if(ele) {
                papa.removeChild(ele);
        } else {
                clearInterval(del);
                add = setInterval(addDot,gap);
        }
}
</script>

马黑黑 发表于 2022-7-12 12:09

二楼效果的代码：
<style>
#papa {
        margin: 50px auto 0;
        width: 600px;
        height: 400px;
        background: #000;
        position: relative;
}
.ball {
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: linear-gradient(60deg,red,white);
}
</style>

<div id="papa"></div>

<script>
let idx = 0, total = 50, gap = 500; //idx:小球标识, total:总数, gap:间隔时间
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
let add = setInterval(addDot, gap), del;
//添加元素
function addDot() {
        let ele = document.createElement('span');
        let ww = papa.offsetWidth, hh = papa.offsetHeight;
        ele.className = 'ball';
        ele.style.left = num(0,ww-20) + 'px';
        ele.style.top = num(0,hh-20) + 'px';
        papa.appendChild(ele);
        idx ++;
        if(idx >= total){
                clearInterval(add);
                idx = 0;
                del = setInterval(delDot, gap);
        }
}
//删除元素
function delDot() {
        let ele = document.querySelector('.ball');
        if(ele) {
                papa.removeChild(ele);
        } else {
                clearInterval(del);
                add = setInterval(addDot,gap);
        }
}
</script>

红影 发表于 2022-7-12 15:09

这个一点点添加，再一点点拿掉，设计巧妙，很好看。{:4_204:}

红影 发表于 2022-7-12 15:12

img.className = 'mypic'; 看一楼还不知道给个名字有什么用，看例子，是为了调用时用的吧。

马黑黑 发表于 2022-7-12 18:10

红影 发表于 2022-7-12 15:12
img.className = 'mypic'; 看一楼还不知道给个名字有什么用，看例子，是为了调用时用的吧。

这是给元素定类名，同等于HTML中的 <img class="mypic" ... />. CSS里，制定了 .mypic，调用这个选择器的样式

红影 发表于 2022-7-12 20:17

马黑黑 发表于 2022-7-12 18:10
这是给元素定类名，同等于HTML中的 . CSS里，制定了 .mypic，调用这个选择器的样式

嗯嗯，知道了{:4_204:}

马黑黑 发表于 2022-7-12 20:20

红影 发表于 2022-7-12 20:17
嗯嗯，知道了

id也可以。 element.id = 'ball'

红影 发表于 2022-7-13 22:12

马黑黑 发表于 2022-7-12 20:20
id也可以。 element.id = 'ball'

嗯，你讲过，id对应#的。

马黑黑 发表于 2022-7-13 22:43

红影 发表于 2022-7-13 22:12
嗯，你讲过，id对应#的。

是的，你还记得，挺不错

红影 发表于 2022-7-14 13:10

马黑黑 发表于 2022-7-13 22:43
是的，你还记得，挺不错

为这个专门询问过你的呀，当然记得{:4_173:}

马黑黑 发表于 2022-7-14 18:16

红影 发表于 2022-7-14 13:10
为这个专门询问过你的呀，当然记得

原来如此

红影 发表于 2022-7-14 19:34

马黑黑 发表于 2022-7-14 18:16
原来如此

发现越是迷惑过的，越是后来印象深点。

马黑黑 发表于 2022-7-14 19:56

红影 发表于 2022-7-14 19:34
发现越是迷惑过的，越是后来印象深点。

好像也有道理

红影 发表于 2022-7-14 21:29

马黑黑 发表于 2022-7-14 19:56
好像也有道理

现在想想，当时迷惑的都是最简单的，但没办法，的确当时不知道{:4_173:}

马黑黑 发表于 2022-7-14 21:30

红影 发表于 2022-7-14 21:29
现在想想，当时迷惑的都是最简单的，但没办法，的确当时不知道

现在回头看就觉得简单了

红影 发表于 2022-7-14 21:57

马黑黑 发表于 2022-7-14 21:30
现在回头看就觉得简单了

还真是呢，所以进步是在不知不觉中的。谢谢黑黑，让我从小白到现在知道一点了{:4_187:}

马黑黑 发表于 2022-7-14 22:07

红影 发表于 2022-7-14 21:57
还真是呢，所以进步是在不知不觉中的。谢谢黑黑，让我从小白到现在知道一点了

变成小黑了？

红影 发表于 2022-7-14 22:14

马黑黑 发表于 2022-7-14 22:07
变成小黑了？

还是小白，只是入门点了的小白{:4_189:}

马黑黑 发表于 2022-7-14 22:17

红影 发表于 2022-7-14 22:14
还是小白，只是入门点了的小白

那就是小黑白

查看完整版本: JS：添加与删除元素