一、替换元素 replaceChild
- 第一个参数是要替换的元素,第二个参数是被替换的元素
<body>
<div id="outNode">
<span>11111</span>
</div>
</body>
<script type="text/javascript">
document.onclick=function(){
var oIpt=document.createElement('input');
outNode.replaceChild(oIpt,outNode.children[0]);
}
</script>
二、删除子级元素 removeChild
<body>
<div id="outNode">
<span id="oSpan">11111</span>
</div>
</body>
<script type="text/javascript">
outNode.removeChild(oSpan)
</script>
错误示例
<body>
<div id="outNode">
<span id="oSpan">
<span id="span2"></span>
</span>
</div>
</body>
<script type="text/javascript">
outNode.removeChild(span2)
</script>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/fbc47d01a3e2e07765dfa5afc48308e0.png)
<body>
<div id="outNode">
<span></span>
<span></span>
</div>
</body>
<script type="text/javascript">
outNode.removeChild(span)
</script>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/dbc7e3b9f4035db574d05da45617be97.png)
<body>
<div id="outNode">
<span>11111</span>
<span>22222</span>
</div>
</body>
<script type="text/javascript">
var allSpan=document.getElementsByTagName('span');
outNode.removeChild(allSpan);
</script>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/cbb773ff3e00f7b4d36dc2633bb14ac1.png)
正确示例-循环删除
<body>
<div id="outNode">
<span>11111</span>
<span>22222</span>
</div>
</body>
<script type="text/javascript">
var allSpan=document.getElementsByTagName('span');
for(var i=0;i<2;i++){
outNode.removeChild(allSpan[0]);
}
三、删除自身元素 remove
- 父级删除后,子级也不会存在。如:删除outNode后,两个span也会删除
<body>
<div id="outNode">
<span>11111</span>
<span id="oSpan">22222</span>
</div>
</body>
<script type="text/javascript">
oSpan.remove();
outNode.children[0].remove();
</script>
四、返回或设置元素内容 innerHTML
1.返回元素里面的内容
<body>
<div id="div1">
<span></span>
<p></p>
<div></div>
</div>
</body>
<script type="text/javascript">
console.log(div1.innerHTML);
</script>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/782eb3624475f65af852726cba7bb750.png)
2. 如果赋值,就是先清空里面的内容,再加上新内容
<body>
<div id="div1">
<span></span>
<p></p>
<div></div>
</div>
</body>
<script type="text/javascript">
div1.innerHTML='<span>123</span>';
</script>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ac2fae41ad2907452b730f9a7d4141aa.png)