innerText 与 innerHtml的区别

最新推荐文章于 2023-02-14 22:51:59 发布

H丶Gorden

最新推荐文章于 2023-02-14 22:51:59 发布

阅读量179

点赞数

本文链接：https://blog.csdn.net/qq_42614253/article/details/81952460

版权

innerText返回或者设置DOM元素的文本

innerHTML返回或者设置DOM元素的子元素

1.返回值的区别:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="name">
    <p>我是P标签</p>
</div>
</body>
<script>
    var text=document.getElementById("name").innerText;
    alert(text);
    var html=document.getElementById("name").innerHTML;
    alert(html)
</script>
</html>

innerText输出的是: 我是标签

innerHtml输出的是: <p>我是P标签</p>

区别：取值时 innerText会把只会获取节点里面的文本信息，而innerHTML 会获取节点下面的所有标签。

2.设置值的区别:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="name">
</div>
<div id="name1">
</div>
</body>
<script>
    var text=document.getElementById("name");
    text.innerText="我是Innertext<br>换行";
    var html=document.getElementById("name1");
    html.innerHTML="我是InnerHtml<br>换行";
</script>
</html><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="name">
</div>
<div id="name1">
</div>
</body>
<script>
    var text=document.getElementById("name");
    text.innerText="我是Innertext<br>换行";
    var html=document.getElementById("name1");
    html.innerHTML="我是InnerHtml<br>换行";
</script>
</html>

输出值:

我是Innertext<br>换行

我是InnerHtml
换行

区别：设置值时 innerText会把html标签当做普通的文本显示，而innerHTML 则不会。

特别说明：

　　innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签

H丶Gorden

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
innerText 与 innerHtml的区别

innerText返回或者设置DOM元素的文本innerHTML返回或者设置DOM元素的子元素1.返回值的区别:&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;&a
复制链接

扫一扫