innerHTML & innerText & value &
2018-03-26 本文已影响0人
蘑菇酱960903
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