javascript创建元素和删除元素概述

本文演示了javascript创建和删除元素。分享给大家参考，如下：

1、创建元素

:动态创建新的DOM元素是js操作网页对象模型的重要手段之一。

！doctype html lang=' en ' head meta charset=' utf-8 ' titlewww.jb51.net创建新元素/title script type=' text/JavaScript '/create new elements函数createnew elements(){//使用innerHTML创建新元素varp 1=document . getelementbyid(' P1 ')；//设置innerHTML内容P1 . innerHTMl=' span my DOM text 1/span '；//使用createElement创建新元素var span=document . create element(' span ')；//为新元素内容创建一个文本节点span . appendchild(document . createtextnode(' my DOM text 2 '))；var p2=document . getelementbyid(' p2 ')；//hook p2 . appendchild(span)；}/script/head body style=' text-align : center ' p输入类型=' button ' value=' create new elements ' onclick=' create new elements()'//p！-容器元素定义为新元素hook-p id=' P1 '/p p id=' p2 '/p/body/html运行效果：

通常有两种方法来创建新元素：

1.直接修改父元素的innerHTML元素；

2.使用createElement()创建它，然后使用appendChild()挂接DOM元素。

第一种方法使用简单，容易理解，但是需要修改整个父元素中包含的HTML内容。如果父元素原来包含一些HTML内容，那么DOM挂钩效率会很低；第二种方法相对灵活高效，但使用起来比较复杂。

2、删除元素

删除一个元素意味着完全删除这个DOM元素，而不是隐藏它。通常，使用removeChild()移除是最常见的方法。

！doctype html lang=' en ' head metacarset=' utf-8 ' titlewww.jb51.net delete element/title scripttype=' text/JavaScript '/delete element function delete element(){//get DOM var del=document . getelementbyid(' del ')待删除；//调用delete函数完全删除del . parent node . remove child(del)；}/script/head body style=' text-align : center ' p input type=' button ' value=' delete element ' onclick=' delete element()'//p！-定义删除的元素-span id=' del '要删除的DOM/span/body/html解析：

因为removeChild()是对子元素的操作，而不是对自身的删除。因此，您需要在调用此函数之前获取要删除的元素的父元素。在本例中，要删除的元素的父元素是通过使用parentNode属性获得的，然后删除目标元素。

3、删除所有的子元素

!doctype html lang=' en ' head metharset=' utf-8 ' title telete所有子元素/title script type=' text/JavaScript '/delete元素的函数，delete children(){//获取父domvar ul=document . getelementsbyname(' ul ')[0]；//判断是否包含子元素if (ul。haschildnodes ()) {varlen=ul。childnodes.length//的子元素数量(var I=0；我透镜；I) {//traverse ul。removechild (ul。child nodes[0])；//Delete } } }/script/head body style=' text-align : center ' ul liitem 1/Li liitem 2/Li liitem 3/Li liitem 4/Li/ul/Br输入类型=' button ' value=' Delete all child elements ' onclick=' Delete children()'//body/html解析：删除子元素，可以通过js提供的removeChild()实现。另外，需要认识到的另一点是，在遍历删除节点的过程中，每删除一个子元素，子元素的数量就会少一个。因此，示例代码总是删除第一个子元素，直到没有子元素。

注意：

文件。getelementsbytagname ("ul ")返回一个数组，后面的0表示这个数组的第一个元素，而这个页面中只有一个ul标签，所以它引用了这个ul标签。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun来测试上述代码的运行效果。

关于JavaScript的更多信息，请参考本网站的主题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript错误与调试技巧总结》、0103010。

希望本文对JavaScript编程有所帮助。