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)。

js中如何删除某个元素下面的所有子元素?(两种方法)的更多相关文章

  1. (网页)angular中实现li或者某个元素点击变色的两种方法(转)

    转自脚本之家: 本篇文章主要介绍了angular中实现li或者某个元素点击变色的两种方法,非常具有实用价值,需要的朋友可以参考下 本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享 ...

  2. SQL Server中灾难时备份结尾日志(Tail of log)的两种方法

    转自:http://www.cnblogs.com/CareySon/archive/2012/02/23/2365006.html SQL Server中灾难时备份结尾日志(Tail of log) ...

  3. 在Activity中响应ListView内部按钮的点击事件的两种方法!!!

    在Activity中响应ListView内部按钮的点击事件的两种方法 转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题: ...

  4. C#统计给定的文本中字符出现的次数,使用循环和递归两种方法

    前几天看了一个.net程序员面试题目,题目是”统计给定的文本中字符出现的次数,使用循环和递归两种方法“. 下面是我对这个题目的解法: 1.使用循环: /// <summary> /// 使 ...

  5. Js类的静态方法与实例方法区分以及jQuery如何拓展两种方法

    上学时C#老师讲到对象有两类方法,静态方法(Static)和实例方法(非Static),当时不理解静态是为何意,只是强记. 后来从事前端工作,一直在对类(即对象,Js中严格来说没有类的定义,虽众所周知 ...

  6. 在Activity中响应ListView内部按钮的点击事件的两种方法

    转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题:如何在Activity中响应ListView内部按钮的点击事件,不要在 ...

  7. JS中判断某个字符串是否包含另一个字符串的五种方法

    String对象的方法 方法一: indexOf()   (推荐) ? 1 2 var str = "123" console.log(str.indexOf("2&qu ...

  8. Easy-UI中datebox的默认显示当前日期的最简单的两种方法

    在中有一个Today按钮就是实现显示当前日期,所以我们在src/jquery.datebox.js文件中可以找到currentText:'Today'.所以我们可以使用'currentText'和'T ...

  9. windows系统中,在当前目录下打开cmd命令行的两种方法

    1.在当前路径地址栏中直接输入‘cmd’,然后回车. 2.在当前路径下,按住‘shift’键同时点击鼠标右键,点击“在此处打开Powershell”. 其实你会发现,两个命令行有很大的区别. cmd: ...

  10. Android中Intent传递对象的两种方法(Serializable,Parcelable)

    今天要给大家讲一下Android中 Intent中如何传递对象,就我目前所知道的有两种方法,一种是Bundle.putSerializable(Key,Object);另一种是 Bundle.putP ...

随机推荐

  1. Google Web Toolkit(GWT) 在windows下环境搭建

    1.什么是GWT? Google Web Toolkit(简称GWT,读作/ˈɡwɪt/),是一个前端使用JavaScript,后端使用Java的AJAX framework,以Apache许可证2. ...

  2. php编译参数注释

    1. 指定安装路径 --prefix=PREFIX 2. 指定运行用户 --with-fpm-user=nginx 3. 指定运行组 --with-fpm-group=nginx 3.与'--pref ...

  3. vue实现多语言国际化(vue-i18n),结合element ui、vue-router、echarts以及joint等。

    老板说我们的项目要和国际接轨,于是乎,加上了多语言(vue-i18n).项目用到的UI框架是element ui ,后续echarts.joint等全都得加上多语言. 一.言归正传,i18n在vue项 ...

  4. 如何去掉bootstrap table中表格样式中横线竖线

    修改之前,表格看上去比较拥挤,因为bootstrap table插件中自带斑马线表格样式,有横线和竖线分栏,现在我们不需要这些. 应UI设计的要求,要去掉中间的横线和竖线,使用了修改需求中一种简单粗暴 ...

  5. linux删除svn版本号库

    当使用了svn版本号控制系统后每一个文件夹下都会有一个.svn文件夹存在,开发完当交付产品或者上传到server时一般要把这些文件夹删除.事实上在linux删除这些文件夹是非常easy的,命令例如以下 ...

  6. javascript预解释中的机制

    预解释是一种毫无节操的机制(自从学了预解释,从此节操是路人) in:‘num’ in window 判断num是否为window这个对象的一个属性,是的话返回true,不是返回false 1.预解释的 ...

  7. 再记AE与AO的区别与联系

    原文地址:转:ArcObjects与ArcEngine作者:梦游   ArcObjects(简称AO),一般都是指ArcGIS Desktop版本的组件开发集,即需要安装ArcGIS桌面版软件后才能安 ...

  8. Altium Designer设置走线间距

  9. 宝塔 ftp 不能连接 列出时出错

    摘抄自 https://www.bt.cn/bbs/forum.php?mod=viewthread&tid=1903&page=1&extra=#pid6515 1.注意内网 ...

  10. 实现indexOf

    1.先判断Array数组是否含有indexOf方法,如果有直接返回结果:如果没有则利用循环比较得到结果. function indexOf(arr, item) { if(Array.prototyp ...