innerHTML和innerText的区别

末蓝、 2022-02-23 08:48 186阅读 0赞

## innerHTML ##

获得：得到元素内部所有标签的内容和标签  
设置：内容中包含了标签，标签是起作用

## innerText ##

获得：得到元素内部的文本，没有标签  
设置：内容中包含了标签，标签是不起作用的，以纯文本的方式显示

下面通过代码详细体验一下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>innerHTML和innerText</title>
    </head>
    <body>
    <div id="myDiv">
        <span>
            <a href="#">我是链接</a>
        </span>
    </div>
    <hr/>
    
    <input type="button" id="b1" value="得到HTML"/>
    <input type="button" id="b2" value="得到Text"/>
    <input type="button" id="b3" value="设置HTML"/>
    <input type="button" id="b4" value="设置Text"/>
    
    <script type="text/javascript">
        document.getElementById("b1").onclick = function () { 
            alert(document.getElementById("myDiv").innerHTML)
        };
    
        document.getElementById("b2").onclick = function () { 
            alert(document.getElementById("myDiv").innerText)
        };
    
        document.getElementById("b3").onclick = function () { 
            document.getElementById("myDiv").innerHTML = "<h2 style='color: red'>这是标题</h2>";
        };
    
        document.getElementById("b4").onclick = function () { 
            document.getElementById("myDiv").innerText = "<h2 style='color: red'>这是标题</h2>";
        };
    </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，186人围观）

还没有评论，来说两句吧...

相关阅读

相关 innerHtml()、innerText()和value的区别

1.首先有一个下拉框 ![0551320975cb49e88e7d903d0498546b.png][] 2.分别获取value值、html值和text值 ![

落日映苍穹つ/ 2024年04月08日 10:01/ 0 赞/ 38 阅读

相关 innerHTML与innerText区别

document 对象中有innerHTML和innerText 两个属性，这两个属性都是获取document对象的文本内容的，这两个属性间有哪些区别呢？通过几个例子

清疚/ 2022年08月07日 03:57/ 0 赞/ 170 阅读

相关 innerHTML、innerText和outerHTML、outerText的区别

1、区别描述如下： innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 inn

布满荆棘的人生/ 2022年07月28日 10:49/ 0 赞/ 156 阅读

相关 javaScript中outerHTML,innerHTML,innerText,outerText的区别

使用innerHTML的时候将找着元素的内容（不包含元素本身）使用outerHTML的时候将找着元素的内容（包含元素本身） innerText,outerTex

深碍√TFBOYSˉ_/ 2022年07月17日 01:39/ 0 赞/ 181 阅读

相关 innerHTML,innerText,outHTML区别

innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对

痛定思痛。/ 2022年06月11日 06:51/ 0 赞/ 152 阅读

相关 innerHTML和innertext的区别

innerHTML和innertext的区别很容易区分，那什么时候用innerHTML，innertext呢。 innerHTML获取的是标签的内容。而innertext获取

柔光的暖阳◎/ 2022年06月07日 02:12/ 0 赞/ 383 阅读

相关 JavaScript中innerText和innerHTML的区别

　　innerText返回或者设置DOM元素的文本　　innerHTML返回或者设置DOM元素的子元素　　1，返回值的区别　　 <div id="d

Bertha 。/ 2022年06月05日 06:39/ 0 赞/ 192 阅读

相关 innerHTML和innerText

<%@ page language="java" import="java.util." pageEncoding="utf-8"%> <%@ page imp

﹏ヽ暗。殇╰゛Y/ 2022年04月17日 04:18/ 0 赞/ 187 阅读

相关 innerHTML和innerText的区别

innerHTML 获得：得到元素内部所有标签的内容和标签设置：内容中包含了标签，标签是起作用 innerText 获得：得到元素内部的文本，没有标签

末蓝、/ 2022年02月23日 08:48/ 0 赞/ 187 阅读

相关 innerText和innerHTML应用

![055242240.gif][] innerText和innerHtml看字面也应该理解的了看看代码 <head runat="server"> <ti

怼烎@/ 2021年12月10日 23:09/ 0 赞/ 246 阅读