【js】innerHTML 与 innerText 的区别

最新推荐文章于 2024-02-01 16:38:35 发布

菜鸟M

最新推荐文章于 2024-02-01 16:38:35 发布

阅读量555

点赞数

分类专栏： # js 文章标签： js

原文链接：https://blog.csdn.net/k491022087/article/details/52558868

版权

js 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

innerText 与 innerHtml 都是打印标签之间的文本信息

1、innerText 打印标签之间的纯文本信息，会将标签过滤掉，低版本的火狐浏览器不支持，而是支持textContent；

如果有多个空格或者是换行，解析为一个空格。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <p>这是P标签</p>
        <p>这是P标签</p>
        <p>这是P标签</p>
    </div>
</body>
 
<script>
    var box = document.getElementById("box");
    //打印标签之间的纯文本信息，会将标签过滤掉
    var str = box.innerText;    
    console.log(str);
</script>
</html>

打印结果：

这是P标签
	
这是P标签
 
这是P标签

2、innerHtml 打印标签之间的内容，包括标签和文本信息，各浏览器都支持，但是高版本的浏览器会原样打印

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <p>这是P标签</p>
        <p>这是P标签</p><p>这是P标签</p>
    </div>
</body>
 
<script>
    var box = document.getElementById("box");
    //打印标签之间的内容，包括标签和文本信息
    var str = box.innerHTML;
    console.log(str);
</script>
</html>

打印结果：
（会把 html 中标签的格式原样打印出）

<p>这是P标签</p>
<p>这是P标签</p><p>这是P标签</p>

在这里插入图片描述

转载：https://blog.csdn.net/k491022087/article/details/52558868

参考：https://www.cnblogs.com/hongzm/archive/2017/08/17/7382299.html

参考：https://www.cnblogs.com/forforever/p/12364346.html

菜鸟M

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【js】innerHTML 与 innerText 的区别

innerText 与 innerHtml 都是打印标签之间的文本信息1、innerText 打印标签之间的纯文本信息，会将标签过滤掉，低版本的火狐浏览器不支持，而是支持textContent；如果有多个空格或者是换行，解析为一个空格。<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><
复制链接

扫一扫