删除节点 removeChild
2017-02-15 本文已影响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>
