JS如何实现标签的添加和删除

2025-10-13 10:47:10

1、第一种,在dom元素下添加子节点中,添加标签需要使用到两个方法,第一个是createElement,这个主要是创建dom对象,第二个是appendChild方法,将dom对象添加到另外一个dom对象下,即添加子节点。具体语法如下:

//创建一个p元素

var para = document.createElement("p");

//获取div

var div=document.getEletementById("result");

//添加标签

div.appendChild(para);

JS如何实现标签的添加和删除

JS如何实现标签的添加和删除

2、第二种方法,是在dom元素之前添加标签,主要使用到insertBefore方法,具体语法如下:

//创建一个p元素

var para = document.createElement("p");

para.innerText="我是新标签";

//获取div

var div=document.getElementById("result");

var p1=document.getElementById("p1");

 

//在div元素下的p1之前添加标签

div.insertBefore(para,p1);

JS如何实现标签的添加和删除

JS如何实现标签的添加和删除

3、对于删除标签,也存在两种方法,第一种是删除某个dom下面的子节点,主要使用到js的removeChild方法。具体用法如下:

//获取div

var div=document.getElementById("result");

//获取p1元素

var p1=document.getElementById("p1");

//删除div下的p1元素

div.removeChild(p1);

JS如何实现标签的添加和删除

JS如何实现标签的添加和删除

4、第二种删除标签的方法,在dom4的规范中才有,直接使用remove方法,删除本节点。具体语法如下:

//获取p1元素

var p1=document.getElementById("p1");

//移除p1元素

p1.remove();

JS如何实现标签的添加和删除

JS如何实现标签的添加和删除

1、添加dom子节点,使用appendChild

2、在节点前添加节点,使用insertBefore

3、删除dom子节点,使用removeChild

4、删除自身节点,使用remove

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢