JavaScript基础：获取元素内容（innerHTML和innerText）

BestKagome

已于 2023-05-31 15:31:01 修改

阅读量4.7k

点赞数

分类专栏： JavaScript

于 2022-07-07 17:28:12 首次发布

本文链接：https://blog.csdn.net/Alley_Olive/article/details/125663593

版权

JavaScript innerHTML innerText DOM操作 HTML元素

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript基础：获取元素内容（innerHTML和innerText）</title>
    <!--
        获取元素内容：
        1、innerHTML
            用于获取与赋值（相当于get和set） 开闭标签元素中完整的内容（包括HTML标签）

            1.1、获取内容

            1.2、赋值内容

        2、innerText
            用于获取与赋值（相当于get和set） 开闭标签元素中文字部分的内容

            2.1、获取内容

            2.2、赋值内容
    -->
    <style>
        div{
            width: 260px;
            height: 200px;
            color:purple;
            background-color: lightpink;
            border:2px solid red;
        }
        .greenyellowButton{
            width: 150px;
            height: 50px;
            color:royalblue;
            margin: 10px;
            background-color: greenyellow;
            border: 2px solid orange;
        }
    </style>
</head>
<body>
    <div id="div1">
        <span>孙悟空，</span>
        <span>真厉害！</span>
    </div>
    <br>
    <input type="button" id="btnShowContent1" value="innerHTML展示内容" class="greenyellowButton">
    <input type="button" id="btnChangeContent1" value="innerHTML改变内容" class="greenyellowButton">
    <br>
    <br>
    <div id="div2">
        <span>猪八戒，</span>
        <span>太懒惰！</span>
    </div>
    <br>
    <input type="button" id="btnShowContent2" value="innerText展示内容" class="greenyellowButton">
    <input type="button" id="btnChangeContent2" value="innerText改变内容" class="greenyellowButton">
</body>
<script>
    // 采用对象注册触发事件法
    // 方式一：
    // 把匿名函数赋值给一个变量，委托该变量执行函数的功能
    var btnShowContent1 = document.getElementById("btnShowContent1");
    var showContentEvent1 = function() {
        // 获取内容
        var divNode1 = document.getElementById("div1");
        var divContent1 = divNode1.innerHTML;
        console.log("第1个div里的内容是：");
        console.log(divContent1);

    };
    btnShowContent1.onclick = showContentEvent1;


    // 方式二：
    // 在给该对象注册触发事件时，就指定好关联的待执行匿名函数
    var btnChangeContent1 = document.getElementById("btnChangeContent1");
    btnChangeContent1.onclick = function(){
        // 赋值内容
        var divNode1 = document.getElementById("div1");
        divNode1.innerHTML = "<b>唐僧每天都要念经！</b>";
        var divContent1 = divNode1.innerHTML;
        console.log("第1个div里的内容是：");
        console.log(divContent1);
    };



    // 采用对象注册触发事件法
    // 方式一：
    // 把匿名函数赋值给一个变量，委托该变量执行函数的功能
    var btnShowContent2 = document.getElementById("btnShowContent2");
    var showContentEvent2 = function() {
        // 获取内容
        var divNode2 = document.getElementById("div2");
        var divContent2 = divNode2.innerText;
        console.log("第2个div里的内容是：");
        console.log(divContent2);

    };
    btnShowContent2.onclick = showContentEvent2;


    // 方式二：
    // 在给该对象注册触发事件时，就指定好关联的待执行匿名函数
    var btnChangeContent2 = document.getElementById("btnChangeContent2");
    btnChangeContent2.onclick = function(){
        // 赋值内容
        var divNode2 = document.getElementById("div2");
        divNode2.innerText = "<b>沙僧每天都要化斋！</b>";
        var divContent2 = divNode2.innerText;
        var divContent3 = divNode2.innerHTML;
        // 标签会被原封不动地输出，不起加粗效果
        console.log("第2个div里的innerText内容是：");
        console.log(divContent2);
        // 标签里的特殊字符尖括号会被转义
        //  < 被转义成 &lt; 
        //  > 被转义成 &gt;
        console.log("第2个div里的innerHTML内容是：");
        console.log(divContent3);
    };
</script>
</html>

页面初始信息: