innerHTML & innerText & value &

Node.textContent 属性表示一个节点及其后代的文本内容。

• 使用直接文本，不解HTML，速度更快，但是会将后代节点的内容显示出来
• 限制css样式，不会解析html
• 跟innerText的作用类似，
• 会删除子节点，并替换成一个给定值得文本节点

Node.innerText 是一个表示一个节点及其后代的“渲染”文本内容的属性。

• innerText意识到样式，并且不会返回隐藏元素的文本，而textContent会。
• 在ie中，如果对innerText 进行修改，会移除当前元素的子节点，而且还会永久性的破坏所有后代文本节点，所以不可能再将节点插入任何其他元素或者同一元素
• 兼容性较差，只有老版本ie和firefox不支持（可用textContent代替）
• 可实现回车符\n，空格符
• 注意：textarea没有innerText属性

Node.innerHTML 返回 HTML 文本

• 将内容解析为HTML需要更长时间
• 能意识到样式和标签，将样式和标签转换成对应内容
• 不会保留空白符，会合并空格，回车成一个空格
• 注意：textarea没有innerHTML属性

value

• 在表单中才有例如：input.value表示input方框中的值
• textarea只有value才能获取值
• 保留所有空白符（tab，空格，回车）
• 其他html标签读取不到value

HTML中的特殊字符

& ---> &
< ----> <
> ----> >
在innerHTML中，&，<,>会被解析成HTML中的&<>
而在innerText中，保留原来的写法

结论：innerText可以用来消除子节点内部的样式，HTML特殊字符；而innerHTML可以用来给子节点添加样式，解析特殊字符成html
https://www.cnblogs.com/fsjohnhuang/p/4319635.html