目录1、提出问题2、开始实验3、记录数据4、分析结果5、得出结论1、提出问题 涉及元素节点内容读取或修改的时候，有三个属性可供选择innerhtml，innerText,textCo
涉及元素节点内容读取或修改的时候，有三个属性可供选择innerhtml，innerText,textContent。
那么这三个属性各有什么不同，又分别适用于什么情况。
受 这个说明启发，我写了个简单的例子比较了三者的不同。
一段简单的HTML代码:
<div id="source">
<style>
.upper-case {
text-transfORM: uppercase;
}
.hidden {
display: none;
}
</style>
<div>
a <span class="upper-case">simple</span> text.
<span class="hidden"> a hidden text.</span>
</div>
</div>
<div id="innerHTML"></div>
<div id="innerText"></div>
<div id="textContent"></div>
<script>
let source = document.getElementById("source");
function trans(which) {
let str = source[which];
console.log(str);
document.getElementById(which)[which] = str;
}
trans("innerHTML");
trans("innerText");
trans("textContent");
</script>
结果页面：
控制台输出：
<style>
.upper-case {
text-transform: uppercase;
}
.hidden {
display: none;
}
</style>
<div>
a <span class="upper-case">simple</span> text.
<span class="hidden"> a hidden text.</span>
</div>
a SIMPLE text.
.upper-case {
text-transform: uppercase;
}
.hidden {
display: none;
}
a simple text.
a hidden text.
从页面结果和控制台的结果来看：
innerHTML: 返回的是文档中元素内的HTML片段，在设置时，HTML片段会进过解析。innerText: 返回的是渲染结果（页面呈现结果）的文本内容。textContent: 返回结果去除了内部（包括嵌套节点）标签及其属性，保留了内部的文本内容。innerText和textContent被设置时以安全方式（不会引起文档结构变化）写入。innerHTML。textContent。innerText。事实上，很多时候，尤其是元素内部只是普通文本的时候，三者的区别不会造成什么问题，所以很多人对它们的区别不清楚。
不过，我认为，至少应该记住：在涉及HTML内容时，必须使用innerHTML；否则，使用textContent，保证安全。 使用innerText往往是为了兼容IE6-7。
以上就是innerHTML innerText textContent使用区别示例详解的详细内容，更多关于innerHTML innerText textContent的资料请关注编程网其它相关文章！
--结束END--
本文标题: innerHTMLinnerTexttextContent使用区别示例详解
本文链接: https://lsjlt.com/news/173014.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0