【JS基础】innerHTML、innerText的使用和区别

最新推荐文章于 2022-03-13 23:45:02 发布

Milk595

最新推荐文章于 2022-03-13 23:45:02 发布

阅读量306

点赞数

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_43352901/article/details/108036296

版权

JavaScript 专栏收录该内容

57 篇文章 4 订阅

订阅专栏

innerHTML、innerText的使用和区别

document对象中有innerHTML、innerText这两个属性，都是获取document对象文本内容

但使用起来是有区别的:

innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身)
outerHTML设置或获取标签自身及其所包含的HTML+文本信息（包括自身）
innerText设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身）

示例代码1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p id="p1">hello Milk</p>
    <script>
      var content = document.getElementById('p1');
      alert(content.innerHTML);
      alert(content.innerText);
      alert(content.outerHTML);
    </script>
</body>
</html>

chrome浏览器打开，效果：
在这里插入图片描述

示例代码2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="div1"><p id="p1">hello Milk</p></div>
    <script>
      var content = document.getElementById('div1');
      alert(content.innerHTML);
      alert(content.innerText);
      alert(content.outerHTML);
    </script>
</body>
</html>

chrome浏览器打开，效果：
在这里插入图片描述

不同之处：

1） innerHTML、outerHTML在设置标签之间的内容时，包含的HTML会被解析；而innerText、则不会；

2） innerHTML、innerText仅设置标签之间的文本，而outerHTML设置包含自身标签在内文本

参考下面文章：
https://www.cnblogs.com/siduoxiaohua/p/10530876.html

Milk595

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JS基础】innerHTML、innerText的使用和区别

innerHTML、innerText的使用和区别document对象中有innerHTML、innerText这两个属性，都是获取document对象文本内容但使用起来是有区别的:innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身)outerHTML设置或获取标签自身及其所包含的HTML+文本信息（包括自身）innerText设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身）
复制链接

扫一扫

专栏目录