innerHTML、innerText、textContent和Jquery中text()、html()、val()

最新推荐文章于 2025-02-19 18:20:51 发布

Cacra

最新推荐文章于 2025-02-19 18:20:51 发布

阅读量2.2k

点赞数 1

分类专栏： Javascript HTML

本文链接：https://blog.csdn.net/u014465934/article/details/87945069

版权

本文介绍了JavaScript中innerHTML、innerText和textContent的区别，以及jQuery中text()、html()和val()的用法。innerHTML获取或设置HTML内容，innerText和textContent获取纯文本内容，但innerText不返回script标签内容且处理空格不同。jQuery的text()用于获取或设置元素的文本内容，html()处理HTML内容，val()则用于输入类型的值操作。

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

1.innerHTML

innerHTML可获取或设置指定元素标签内的 html内容，从该元素标签的起始位置到终止位置的全部内容(包含html标签)。

获取元素的内容：element.innerHTML;
给元素设置内容：element.innerHTML =htmlString;

代码示例为：

<p id="test"><font color="#000">获取段落p的 innerHTML</font></p>
document.getElementById("test").innerHTML

输出内容为:<font color="#000">获取段落p的 innerHTML</font>

javascript获取节点文本值：
（1）原生js写法 document.getElementById(‘test’).innerHTML
（2）jQuery写法 $(’#test’).html()

outerHTML:

除了包含innerHTML的全部内容外, 还包含对象标签本身。

<div id="test">
<span style="color:red">test1</span> test2
</div>

//test.innerHTML
“<span style="color:red">test1</span> test2 ”
//text.outerHTML
<div id="test"><span style&