JavaScript-innerHtml与DOM方法的区别

最新推荐文章于 2022-12-10 20:18:12 发布

隐藏用户y

最新推荐文章于 2022-12-10 20:18:12 发布

阅读量135

点赞数

分类专栏：前端入门文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_55355282/article/details/128254872

版权

前端入门专栏收录该内容

42 篇文章 0 订阅

订阅专栏

innerHtml

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        window.onload = function () {
            var color = document.getElementById("color");
            var lis = document.querySelectorAll("li");
            for (var i = 0; i < lis.length; i++) {
                lis[i].onclick = function () {
                    alert(this.innerHtml);
                };
            }
            //innerHtml方法给color添加元素
            // color.innerHTML += '<li>white</li>';
        };
    </script>
    <ul id="color">
        <li>red</li>
        <li>green</li>
        <li>blue</li>
        <li>yellow</li>
        <li>pink</li>
    </ul>
</body>

</html>

此时运行点击任意一个，弹框显示undefined，为什么呢，因为html是大写的

 alert(this.innerHTML);

取消注释的内容，点击事件失效。

innerHTML会先清空原来的内容，然后再添加新的内容，原来的内容已经没有了，只不过是后来添加的内容和原来的内容长得一样而已。

如果考虑使用innerHTML，要考虑之前的事件会不会失效。

DOM方法

会把新的内容追加到原来的内容里面，原来内容所具有的事件，依然会在。

   <script>
        window.onload = function () {
            var color = document.getElementById("color");
            var lis = document.querySelectorAll("li");
            for (var i = 0; i < lis.length; i++) {
                lis[i].onclick = function () {
                    alert(this.innerHTML);
                };
            }
            //innerHtml方法给color添加元素
            // color.innerHTML += '<li>white</li>';

            //DOM方法给color添加元素
            var newLi = document.createElement("li");
            newLi.innerHTML = 'white';

            color.appendChild(newLi);
        };
    </script>

代码中，原来的元素的点击事件都存在，新添加的元素没有点击事件、

如果要用innerHTML

可以把如下代码

            var lis = document.querySelectorAll("li");
            for (var i = 0; i < lis.length; i++) {
                lis[i].onclick = function () {
                    alert(this.innerHTML);
                };
            }

放在添加元素后的代码的后面

添加元素再获取再添加事件。

最后把两种办法写两个script放一起

    <script>
        window.onload = function () {
            var color = document.getElementById("color");
            var lis = document.querySelectorAll("li");
            for (var i = 0; i < lis.length; i++) {
                lis[i].onclick = function () {
                    alert(this.innerHTML);
                };
            }


            //DOM方法给color添加元素
            var newLi = document.createElement("li");
            newLi.innerHTML = 'white';

            color.appendChild(newLi);
        };
    </script>
    <script>
        window.onload = function () {
            var color = document.getElementById("color");

            // innerHtml方法给color添加元素
            color.innerHTML += '<li>white</li>';


            var lis = document.querySelectorAll("li");
            for (var i = 0; i < lis.length; i++) {
                lis[i].onclick = function () {
                    alert(this.innerHTML);
                };
            };
        };
    </script>

隐藏用户y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript-innerHtml与DOM方法的区别

此时运行点击任意一个，弹框显示undefined，为什么呢，因为html是大写的取消注释的内容，点击事件失效。如果考虑使用innerHTML，要考虑之前的事件会不会失效。
复制链接

扫一扫