innerHTML、innerText和textContent的区别_innerhtml) console.log(obox.innertext) console.log-CSDN博客

本文链接：https://blog.csdn.net/qq_57104988/article/details/126498616

<body>
    <style>
        button {
            background-color: #D59392;
        }
    </style>

    <div id="box">
        <p>今天是晴天</p>室外温度37摄氏度
        <span>室内温度25摄氏度</span>
    </div>
    <button type="button">气温实时查询</button>

    <script type="text/javascript">
        let body = document.querySelector("body");

        console.log("innerHtml的内容：" + body.innerHTML);
        console.log("innerText的内容：" + body.innerText);
        console.log("textContent的内容：" + body.textContent);

    </script>
</body>

innerHTML

innerHtml的内容：
    <style>
        button {
            background-color: #D59392;
        }
    </style>

    <div id="box">
        <p>今天是晴天</p>室外温度37摄氏度
        <span>室内温度25摄氏度</span>
    </div>
    <button type="button">气温实时查询</button>

    <script type="text/javascript">
        let body = document.querySelector("body");

        console.log("innerHtml的内容：" + body.innerHTML);
        console.log("innerText的内容：" + body.innerText);
        console.log("textContent的内容：" + body.textContent);

    </script>

innerText

innerText的内容：今天是晴天

室外温度37摄氏度 室内温度25摄氏度
气温实时查询

textContent

textContent的内容：
    
        button {
            background-color: #D59392;
        }
    

    
        今天是晴天室外温度37摄氏度
        室内温度25摄氏度
    
    气温实时查询

    
        let body = document.querySelector("body");

        console.log("innerHtml的内容：" + body.innerHTML);
        console.log("innerText的内容：" + body.innerText);
        console.log("textContent的内容：" + body.textContent);