版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/WinstonLau/article/details/82708910
功能列表
| innerText | innerHTML |
|---|---|
| 功能一：获取对象内的文本信息 功能二：向对象内插入内容（插入的 html 标签不会生效） |
功能一：获取对象内的标签和文本信息 功能二：向对象内插入内容（插入的 html 标签会生效） |
两者功能二的共同特点
对象内如果没有任何内容，则直接插入
对象内如果已经有了内容：
- 如果操作的对象内只有纯文本，没有其它标签（就是说要操作的对象是非嵌套标签），则两者都是直接替换原有的文本内容
- 如果操作的对象内不仅有文本，还有其它标签（就是说要操作的对象是嵌套标签），则两者都会将对象内的所有内容替换，包括其中的标签和文本，这一点和获取对象内的内容时是不一样的，要特别注意
总结：插入内容时，两者除了对插入的 html 标签的处理方式不同外，其余的都是一样的，这一点在“两者功能二比较”的代码中也做了解释
两者功能一比较
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">我是第一个 div 标签</div>
<div id="div2">
<p>我是 p 标签</p>
</div>
</body>
<script>
/*
* 标签没有嵌套的情况
* */
var div1 = document.getElementById("div1");
//输出结果：我是第一个 div 标签
console.log(div1.innerText);
//输出结果：我是第一个 div 标签（就是这个结果，没有错，千万要注意，因为这个 div 标签里面是没有其它标签的）
console.log(div1.innerHTML);
/*
* 标签有嵌套的情况
* */
var div2 = document.getElementById("div2");
//输出结果：我是 p 标签
console.log(div2.innerText);
//输出结果：<p>我是 p 标签</p>（结果中还包括上一行、这一行和下一行的空格，后面会有截图，看得比较清楚）
console.log(div2.innerHTML);
</script>
</html>结果截图：
两者功能二比较
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div1" style="color:red;">我是第一个 div 标签</div>
<br>
<div id="div2">
<p style="color:red;">我是第一个 p 标签</p>
</div>
<br>
<div id="div3">
<p style="color:red;">我是第二个 p 标签</p>
</div>
</body>
<script>
var div1 = document.getElementById("div1");
//<br>标签的效果不会生效，将其当作字符串原样插入
div1.innerText = "我是<br>通过 innerText 替换后的第一个 div 标签";
/*
* 从结果来看，如果要操作的对象是嵌套标签，那么无论是 innerText 还是 innerHTML，
* 它们替换的都不仅仅是标签内的文本内容，而是标签内的所有内容（标签和文本），
* 否则下图中的第二段文字和第三段文字都会显示红色
* */
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");
//<br>标签的效果不会生效，将其当作字符串原样插入
div2.innerText = "我是<br>通过 innerText 替换后的第二个 div 标签";
//<br>标签的效果会生效，产生换行效果
div3.innerHTML = "我是<br>通过 innerHTML 替换后的第三个 div 标签";
</script>
</html>结果截图：
