outerHTML和innerHTML的区别

假设html为

<div class="div1">
		<div class="circle">
			<img src="http://localhost:8080/static/image/yu@2x.png" alt="">
		</div>
	</div>

首先是outerHTML

读 > 返回连带自身的代码块

let div = document.getElementsByClassName("div1")[0]
// 读
console.log(div.outerHTML)

结果为

<div class="div1">
		<div class="circle">
			<img src="http://localhost:8080/static/image/yu@2x.png" alt="">
		</div>
	</div>

写 >将自身替换成你要插入的代码

let div = document.getElementsByClassName("div1")[0]
// 写
div.outerHTML = "<h1>大家好</h1>"

结果为 整个div1 都没有了 , 变成了 <h1>大家好</h1>

<h1>大家好</h1>

然后是InnerHTML

读 > 返回自身的子元素

let div = document.getElementsByClassName("div1")[0]
// 读
console.log(div.innerHTML)

结果为

<div class="circle">
			<img src="http://localhost:8080/static/image/yu@2x.png" alt="">
		</div>

写 >将子元素替换插入的元素

let div = document.getElementsByClassName("div1")[0]
// 写
div.innerHTML= "<h1>大家好</h1>"

子元素 , 变成了

<div class="div1">
	<h2>大家好</h2>
</div>

如果要报留原来的子元素 可以用

div.innerHTML += "<h2>大家好<h2>"