js中修改div的内容textContent，innerHTML，innerText，value的用法以及区别

最新推荐文章于 2024-12-18 10:52:08 发布

徊忆羽菲

最新推荐文章于 2024-12-18 10:52:08 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Html Javascript

本文链接：https://blog.youkuaiyun.com/guo_qiangqiang/article/details/115553821

本文详细介绍了JavaScript中用于修改DOM内容的几个关键属性：textContent、innerText、innerHTML及其区别。通过实例展示了它们在设置和获取文本内容时的效果，特别强调了innerText和textContent在不同浏览器的兼容性问题。此外，还提及了value属性在表单元素中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js中修改div的内容textContent，innerHTML，innerText，value的用法以及区别

textContent的用法
- 设置标签中的文本内容
- 获取标签中的文本内容
innerText的用法
- 设置标签中的文本内容
- 获取标签中的文本内容
innerHTML的用法
- 设置标签中的文本内容
- 获取标签中的文本内容
innerText和textContent的区别
textContent、innerText和innerHTML的区别
value的用法
总结

textContent的用法

设置标签中的文本内容

<body>
<input type="button" value="按钮" id="btn">
<div id="qipa250">www.qipa250.com</div>

<script>
document.getElementById("btn").onclick = function () {
    
document.getElementById("qipa250").textContent = "奇葩天地网";
};
</script>
</body>

在这里插入图片描述
点击按钮变化

获取标签中的文本内容

<body>
<input type="button" value="按钮" id="btn">
<div id="qipa250">www.qipa250.com</div>

<script>
document.getElementById("btn").onclick = function () {
    
var text = document.getElementById("qipa250").textContent;
alert(text);
};
</script>
</body>

在这里插入图片描述点击弹窗

innerText的用法

设置标签中的文本内容

<body>
<input type="button" value="按钮" id="btn">
<div id="qipa250">www.qipa250.com</div>

<script>
document.getElementById(

最低0.47元/天解锁文章