JavaScript怎么添加删除元素

小编给大家分享一下JavaScript怎么添加删除元素,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

JS添加和删除元素的方法:1、使用“列表末尾(“元素名称“)”添加元素;2、使用“方法(元素名称,在哪添加元素)”,可在任意位置添加元素;3、使用“removeChild(“元素名称“)”删除元素。

<强> JavaScript如何添加删除元素

要添加一个元素,首先要先创建一个元素,若要往新添加的元素里面写入文本,那就还要创建一个文本节点,再将文本节点的值插入到新添加的元素中。

(1) createElement(“元素名“):此方法可以创建一个新的元素,例如:createElement (“p")表示创建了一个p标签(元素/段落)。

(2) createTextNode(“文本内容“):此方法可以创建一个文本节点。例如:createTextNode(“我是新的内容“),表示创建了一个值为“我是新的内容”的文本节点。

(3)列表末尾(“元素名称“):添加一个新的元素,例如:ul.appendChild (“li")表示在ul里面添加一个李元素。

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

下面的例子为ul动态的添加李元素,并且每一次都在原有李的前面添加。

& lt; script> 　　,,,,,window.οnlοad=function  (), { 　　,,,,,,,,,var  UL=document.getElementsByClassName(& # 39;盒# 39;)[0]; 　　,,,,,,,,,var  btn=document.getElementsByTagName(& # 39;按钮# 39;); 　　,,,,,,,,,var 指数=1,,,//序号计数器 　　,,,,,,,,,btn[0] .οnclick=function (),{,,,//创建新节点,并添加新元素,新添加的元素总是在最前的面 　　,,,,,,,,,,,,,var 李=document.createElement(& # 39;李# 39;),,,//创建李元素 　　,,,,,,,,,,,,,,,,,内容=& # 39;我是第& # 39;+指数+ & # 39;个李# 39;,,,,,//李元素的文本节点的内容 　　,,,,,,,,,,,,,var 文本=document.createTextNode(内容),,,//创建李元素的文本节点 　　,,,,,,,,,,,,,指数+ +;,,,//每创建一个李计数就+ 1 　　,,,,,,,,,,,,,var 李=UL.getElementsByTagName(& # 39;李# 39;),,,,,//获取页面中的李集合 　　,,,,,,,,,,,,,UL.insertBefore (li li [0]), li.appendChild(文本);,,//在页面中第一个李前面添加新李的标签 　　,,,,,,,,,} 　　,,,,,,,,,btn[1] .οnclick=function (),{//才能删除添加的元素 　　,,,,,,,,,,,,,var 李=document.getElementsByTagName(& # 39;李# 39;)[0]; 　　,,,,,,,,,,,,,如果(!指数% 2==0){ 　　,,,,,,,,,,,,,,,,,li.parentNode.removeChild(李); 　　,,,,,,,,,,,,,} 　　,,,,,,,,,} 　　,,,,,} 　　& lt;/script> 　　& lt;/head> 　　& lt; body> 　　& lt; button>点击添加新李的元素& lt;/button> 　　李& lt; button>点击删除元素& lt;/button> 　　& lt; ul 类=癰ox"祝辞 　　& lt;/ul> 　　& lt;/body>

标注:如果你想每一次新添加的李都在原有李的前面,那就要用到<代码>方法()方法了。

<代码>方法()里面有两个参数值,第一个参数值为你要添加的元素名称,第二个参数值为要在哪里添加的元素的名称(值可以为零),当为空时,效果就和<代码>列表末尾()一样了。

例如上面的例子,我想每一次添加的元素李都在最前面。那么只需要改动第四步就行了:

var 李=UL.getElementsByTagName (“li"); 　　UL.insertBefore (li li [0]); li.appendChild(文本);

也就是说想要添加一个新元素有两种方法:①列表末尾(),②方法();删除一个元素:removeChild ()

以上是“JavaScript怎么添加删除元素”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

JavaScript怎么添加删除元素