2022年02月13日发布JavaScript添加删除元素

大家好，今日小科来聊聊一篇关于2022年02月13日整理发布：JavaScript如何添加删除元素的文章，现在让我们往下看看吧！

JS添加和删除元素的方法：1。添加带有“appendChild('元素名称')”的元素；2.使用“插入之前”在任何位置添加元素；3.使用“移除子元素(‘元素名’)”删除元素。

如何在JavaScript中添加和删除元素

要添加元素，必须先创建一个元素。如果要在新添加的元素中写入文本，必须创建一个文本节点，然后将文本节点的值插入到新添加的元素中。

(1)createElement ('element name '):这个方法可以创建一个新元素。例如：createElement('p ')，这意味着已经创建了一个p标记(元素/段落)。

(2)createTextNode ('Text Content '):这个方法可以创建一个文本节点。例如，createTextNode(“我是新内容”)表示已经创建了一个值为“我是新内容”的文本节点。

(3)appendChild('元素名'):添加新元素。例如，ul.appendChild('li ')表示向ul添加li元素。

(4)removeChild('元素名称'):删除元素。用法与(3)相反。

以下示例显示ul动态添加li元素，并且每次都是在原始li前面添加。

脚本

window .nad=function(){ 0

var UL=document . getelementsbyclassname(' box ')[0]；

var BTN=document . getelementsbytagname(' button ')；

var指数=1；//序列号计数器

Btn[0].nclick=function () {//新建一个节点，添加新元素，总是在最前面。

Var=文档。创建元素(' li ')，//创建Li元素

内容=“我是‘指数’李”；//li元素文本节点的内容

var text=document . createtextnode(内容)；//创建li元素的文本节点

指数；//每创建一个li计数1。

var Li=ul . getelementsbytagname(' Li ')；//获取页面中的li集合

UL.insertBefore(li，Li[0])，Li . appendchild(text)；//在页面的第一个li前面添加新的li标签

}

Btn[1].nclick=function () {//删除添加的元素

var Li=document . getelementsbytagname(' Li ')[0]；

if(！索引% 2==0){ 0

Li . parent node . remove child(Li)；

}

}

}

/script

/head

身体

按钮单击添加新li元素/按钮。

按钮单击删除li元素/按钮

ul class='box '

/ul

/body注释：如果希望新添加的li每次都在原来的li之前，那么需要使用insertBefore()方法。

InsertBefore()包含两个参数值。第一个参数值是要添加的元素的名称，第二个参数值是要添加的元素的名称(该值可以为空)。当它为空时，效果与appendChild()相同。

比如上面的例子，我觉得每次加元素li，都是在前面。那就换第四步吧：

var Li=ul . getelementsbytagname(' Li ')；

UL.insertBefore(li，Li[0])；li.appendChild(文本)；也就是说，添加新元素有两种方式：appendChild()，Insert before()；删除元素：removeChild()

这篇好文章是转载于：知行礼动