innerHTML的DOM用法

最新推荐文章于 2022-10-19 10:03:42 发布

小吴同志你好呀

最新推荐文章于 2022-10-19 10:03:42 发布

阅读量619

点赞数 1

分类专栏： web前端文章标签： dom

本文链接：https://blog.csdn.net/baidu_38742725/article/details/77599907

版权

web前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

innerHTML

innerHTML的用法：

获取DOM元素
DOMObject.innerHTML

特别注意：

如果获取的DOM元素为ID，则直接 .innerHTML 即可；
如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="para">hello world</p>

    <script type="text/javascript">
        var content = document.getElementById("para");
        console.log(content.innerHTML);
    </script>

</body>
</html>

如果获取的DOM元素为ID以外的其他，则直接 .innerHTML 不行，必须加上索引号，因为其他获取到的是一个数组，它的标签不止一个
如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p class="para">hello world</p>

    <script type="text/javascript">
        var content = document.getElementsByClassName("para")[0];
        console.log(content.innerHTML);
    </script>

</body>
</html>

与innerText的区别：

推荐看这篇博客：http://blog.csdn.net/magi1201/article/details/44131361
不过，要纠正一点：现在火狐也支持innerText了，以前使用innerText得到的是undefined，现在它得到的结果是标签内文本。真是程序媛的福音，喜大普奔~奔走相告~~

小吴同志你好呀

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
innerHTML的DOM用法

innerHTMLinnerHTML的用法：获取DOM元素DOMObject.innerHTML特别注意：如果获取的DOM元素为ID，则直接 .innerHTML 即可；如：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body
复制链接

扫一扫

专栏目录