js中如何删除某个元素下面的所有子元素?(两种方法)

一、总结

方法一:通过元素的innerHTML属性

元素element.innerHTML="";

方法二:通过元素的removeChild方法

子元素element.parentNode.removeChild(子元素element);

 

二、js中如何删除某个元素下面的所有子元素?

问题1:

js删除一个父元素下面的所有子元素

比如

<div id="ok">

<button tpye='button'>111111</button>

<p>22222</p>

<div> <p>31232</p> </div>

</div>

而如果想删除其中的一个应该如何做

 

解答1:

document.getElementById("ok").innerHTML = "";

用jquery的话更方便

 

问题2:

js中怎么删除一个标签及其标签下的所有内容?

<ul class="list2" id="dy" >

<li id="xh1">

<img alt="" src="Logo/aaa.jpg" />

<h3><a>aaaaa</a></h3>

<p>aaa111</p>

</li>

<li id="xh2">

<img alt="" src="Logo/aa.jpg" />

<h3><a>bbbbb</a></h3>

<p>bbb111</p>

</li>

</ul>

怎么用代码删除后变成一下效果!

<ul class="list2" id="dy" >

<li id="xh1">

<img alt="" src="Logo/aaa.jpg" />

<h3><a>aaaaa</a></h3>

<p>aaa111</p>

</li>

</ul>

 

解答2:

​var​​ ​​elem=document.getElementById(​​​​'xh2'​​​​); ​​​​// 按 id 获取要删除的元素​


elem.parentNode.removeChild(elem); ​​​​// 让 “要删除的元素” 的 “父元素” 删除 “要删除的元素”​


 

 

三、测试题-简答题

1、我要删掉某个标签的所有孩子,然后新加一个新的孩子,也就是将原来的所有孩子替换为一个新的孩子,那么我的操作是什么?

解答:直接获取元素对象,然后innerHTML=孩子标签的html。这个是innerHTML,而不是innerText,说明里面就是HTML。

 

2、如何获取一个节点的父亲节点的element?

解答:先获取这个节点的element,然后​​elem.parentNode​​即可。

 

3、一个节点如何移除自己的某个孩子?

解答:element.removeChild(孩子的element)。

 

 ​