美文网首页
删除节点 removeChild

删除节点 removeChild

作者: 新晋小牛牛 | 来源:发表于2017-02-15 15:03 被阅读15次

下面简单写了三种删除函数,可以用来对比一些删除方式的不同

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>

<body>
<div id="content">
  <h1>html</h1>
  <h1>php</h1>
  <h1>javascript</h1>
  <h1>jquery</h1>
  <h1>java</h1>
</div>
<script type="text/javascript">
function clearText() {
  var content=document.getElementById("content");
  // 在此完成该函数
 //childNodes.length 就变化了,但好像这里并不是这个原因
 //   //方法一
//     for(i=content.childNodes.length-1;i>=0;i--){
//      var x= content.childNodes[i];
//      content.removeChild(x);
//     }
//   //方法二
//     for(i=0;i<content.childNodes.length;i++){
//      var x= content.childNodes[i];
//      content.removeChild(x);
//     }
    //方法三 这种方法是因为 chrome 能识别空文本子节点
    for(i=0;i<content.childNodes.length;i++){
        if(content.childNodes[i].nodeType!=1){
            continue;
        } else{
            content.removeChild(content.childNodes[i]);
        }
    }
}
</script>

<button onclick="clearText()">清除节点内容</button>



</body>
</html>

相关文章

网友评论

      本文标题:删除节点 removeChild

      本文链接:https://www.haomeiwen.com/subject/hosqwttx.html