innerHTML，innerText和outerHTML，outerText的区别

他们的作用分别是：

• innerHTML 设置或获取位于对象起始和结束标签内的 HTML
• outerHTML 设置或获取对象及其内容的 HTML 形式
• innerText 设置或获取位于对象起始和结束标签内的文本
• outerText 设置(包括标签)或获取(不包括标签)对象的文本

比较：

• innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。
• 在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。

举例：

假如页面里有这样一个标签，

测试效果

，我们分别执行这四种操作的结果是：

//执行：innerHTML
test.innerHTML="refined-x.com";
//结果：

refined-x.com

//执行：innerText
test.innerText="refined-x.com";
//结果：

refined-x.com

//执行：outerHTML
test.outerHTML="refined-x.com";
//结果：refined-x.com

//执行：outerText
test.outerText="refined-x.com";
//结果："refined-x.com"