关于innerHTML的用法,以及数据覆盖问题

最新推荐文章于 2023-08-14 14:04:16 发布

尘埃落定wf

最新推荐文章于 2023-08-14 14:04:16 发布

阅读量3.9k

点赞数 5

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_46642164/article/details/123044672

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文探讨了JavaScript中innerHTML属性在更新HTML内容时可能导致的覆盖问题。通过示例代码展示当使用innerHTML时不加加号（+）会导致先前内容被覆盖，而添加加号实现内容拼接，正确显示多个数据。了解innerHTML的工作原理对于前端开发至关重要。

摘要由CSDN通过智能技术生成

关于innerHTML的用法

innerHTML用于在HTML节点中插入一段HTML,需要注意的是使用innerHTML后该节点原来的html会被被覆盖
出现的问题：
代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="demo">111111</div>
    <script>
        var arr = [
            { name: "<p>" + '123' + "</p>" },
            { name: "<p>" + '456' + "</p>" },
            { name: "<p>" + '789' + "</p>" }
        ]
        for (let item of arr) {
            console.log(item);
            document.getElementsByClassName("demo")[0].innerHTML = item.name;
        }
    </script>
</body>

</html>

在这里插入图片描述
这与我们期望的结果不一样的，arr中三条数据只输出最后一条，这是因为使用时没有加上 + 代码加上加号后HTML等于进行了一次又一次的拼接

更改处的：

  document.getElementsByClassName("demo")[0].innerHTML += item.name;

在这里插入图片描述
正确的显示了，数据也没被覆盖

尘埃落定wf

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录