javascript之innerHTML、outerHTML、innerText的使用——前端复习记录

最新推荐文章于 2023-08-10 10:36:16 发布

HarperFive

最新推荐文章于 2023-08-10 10:36:16 发布

阅读量188

点赞数

分类专栏： Web 文章标签： js

本文链接：https://blog.csdn.net/qq_42752823/article/details/107231276

版权

Web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

innerHTML、outerHTML、innerText可以获得document对象的文本内容。

具体区别如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript测试</title>
    <script>
        function myInnerHTML() {
            alert(document.getElementById("text1").outerHTML);
        }

        function myOuterHTML() {
            alert(document.getElementById("text1").innerHTML);
        }

        function myInnerText() {
            alert(document.getElementById("text1").innerText);
        }
    </script>
</head>
<body>
<h1 id="text1"><p>Hello</p><p>World</p></h1>
<button onclick="myInnerHTML()">outerHTML</button>
<button onclick="myOuterHTML()">innerHTML</button>
<button onclick="myInnerText()">innerText</button>
</body>
</html>

显示结果：

outerHTML：
innerHTML：
innerText：

1、outerHTML是包括自身起始标签和结束标签在内的所有标签和元素内容。
2、innerHTML是除自身起始标签和结束标签的所有标签和元素内容。
3、innerText起始标签至结束标间的的所有元素内容。
在这里插入图片描述

HarperFive

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript之innerHTML、outerHTML、innerText的使用——前端复习记录

innerHTML、outerHTML、innerText可以获得document对象的文本内容。具体区别如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>JavaScript测试</title> <script> function myInnerHTML() { alert(doc
复制链接

扫一扫

专栏目录