innerHTML和outerHTML以及innerText和outerText之间的区别

一、innerHTML和outerHTML的关系
在面试中也常常问道innerHTML和outerHTML之间的区别，这里我们总结一下。innerHTML表示内部文本，如下所示。

<div><h1>大家好</h1></div>

其打印其innerHTML的值为：

<h1>大家好</h1>

outerHTML表示外部文本，包含标签。
其打印outerHTML的值为:

<div><h1>大家好</h1></div>

二、outerText和innerText的关系
outerText和innerText两者都表示内部文本，两者的打印结果是一致的。

<h1>大家好<span>你是谁</span></h1>

innerText的结果：

大家好你是谁

outerText的结果：

大家好你是谁

不同点：
innerText和outerText对其进行赋值的时候，表现结果不同。

<h1>大家好<span>你是谁</span></h1>

使用innerText进行赋值的结果：

使用outerText进行赋值为：

如上图所示两者之间的差别可以总结为：innerText在对其内部文本进行赋值时，不会对外部标签赋值，但是outerText对其内部文本赋值时吗，包含外部标签。