代码描述:js删除 元素所有子元素。js删除执行元素下所有子元素简单介绍
本章节介绍一下如何删除指定元素下的所有子元素,废话不多说,直接看代码。 一.使用innerHTML:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <script type="text/javascript"> window.onload=function(){ var obox=document.getElementById("box"); var obt=document.getElementById("bt"); obt.onclick=function(){ obox.innerHTML=""; } } </script> </head> <body> <ul id="box"> <li>51前端一</li> <li>51前端二</li> <li>51前端三</li> <li>51前端四</li> <li>51前端五</li> </ul> <input type="button" id="bt" value="查看效果"/> </body> </html>
以上代码可以将div中的所有内容情况的一干二净,无论是文本节点还是元素节点,在标准浏览器中,空格和换行算是文本节点,有时候我们只想清除元素节点,代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <script type="text/javascript"> window.onload=function(){ var obox=document.getElementById("box"); var lis=obox.getElementsByTagName("li"); var len=lis.length; var obt=document.getElementById("bt"); var theArray=[]; obt.onclick=function(){ for(var index=0;index<len;index++){ theArray.push(lis[index]); } for(var i=0;i<theArray.length;i++){ obox.removeChild(theArray[i]); } } } </script> </head> <body> <ul id="box"> <li>51前端一</li> <li>51前端二</li> <li>51前端三</li> <li>51前端四</li> <li>51前端五</li> </ul> <input type="button" id="bt" value="查看效果"/> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能