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. 1.13 Python基础知识 - 字典和集合

    一.字典 字典是一组键-值对的数据结构.每个键对应一个值.在字典中,键不能重复.根据键可以查询到值.字典是键和值的映射关系 字典的定义: 字典通过花括号中用逗号分隔的元素(键-值.键-值对使用冒号分隔 ...

  2. 绝对定位等html结构,水平居中的处理方案

    1.父子结构,父relative,子absolute.子元素要水平居中:left:50%:margin-left:子元素一半的宽度.因为定位的left是按左边框开始计算.[固定问题的模块化解决]

  3. Java基础学习总结(53)——HTTPS 理论详解与实践

    前言 在进行 HTTP 通信时,信息可能会监听.服务器或客户端身份伪装等安全问题,HTTPS 则能有效解决这些问题.在使用原始的HTTP连接的时候,因为服务器与用户之间是直接进行的明文传输,导致了用户 ...

  4. JS学习笔记 - 微博发布效果

    <script> window.onload = function() { var oTxt = document.getElementById('txt1'); var oBtn = d ...

  5. .NetCore微服务Surging新手傻瓜式 入门教程 学习日志---先让程序跑起来(一)

    原文:.NetCore微服务Surging新手傻瓜式 入门教程 学习日志---先让程序跑起来(一) 写下此文章只为了记录Surging微服务学习过程,并且分享给广大想学习surging的基友,方便广大 ...

  6. linux查找keyword在php出现的次数

    查找CleverCode在当前文件夹以及子文件夹,全部的php出现大于0的次数. # find -type f -name '*.php' | xargs grep CleverCode ./*.ph ...

  7. 想在子线程里面触发的信号的槽函数在子线程执行,信号槽连接必须使用DirectConnection 方式(即使跨线程,也可以强迫DirectConnection,而不能是AutoConnection)

    Qt多线程的实现 1.继承QThread,重新run 2.继承Object,调用moveToThread方法 两种方法各有利弊:主要参考:http://blog.51cto.com/9291927/1 ...

  8. php 获取隔日日期

    php获取日期时间 <?php date_default_timezone_set('PRC'); //默认时区 echo "今天:",date("Y-m-d&qu ...

  9. Altium Designer绘制mark点

    mark注:我之前是按照下面的文章去制作的,由于头一次制作没有经验,不是很成功 文章是正确的 只是我的一些配置出错了: 先看一下我们的板子: 关于错误mark点,主要是周边又一圈亮锡,, 原因大概是敷 ...

  10. (转)Bash 快捷键 完整版

    转自:http://www.opsers.org/linux-home/base/full-version-of-bash-keyboard-shortcuts.html#toc-3 生活在 Bash ...