【博学谷学习记录】超强总结，用心分享 |通过循环动态添加元素失败案例-优快云博客

本文链接：https://blog.youkuaiyun.com/scjiji/article/details/126911221

1.需求：

根据数据的数量，动态地给列表添加对应的小li，并将数据中的数据动态地放入到小li中。

2.错误代码：只有最后一个小li添加成功，并且程序并没有任何报错提示

<html>
    <script>
        window.onload = function(){
            // 获取父元素
            var ul = document.querySelector("ul");
            // 获取数据
            var date = ["学习中心", "直播课", "价格", "师资", "实操", "问答", "常见问题", "百战故事", "课程更新", "关于我们"];
            // 创建子元素
            var li = document.createElement('li');
            // 动态插入子元素
            for(var i = 0;i < date.length;i++){
                
                li.innerText = date[i];
                ul.appendChild(li)
                
            }
           
        }
    </script>
</head>
<body>
    <ul></ul>
</body>
</html>

3.错误原因：

元素和变量不一样，变量创建之后，可以多次使用，但是元素不能创建一个使用多次，所以，如果想要重复地添加元素，需要将要创建的元素放到循环中去，每次插入之前都需要重新创建一个新的小li才可以。

4.正确代码：

<html>
    <script>
        window.onload = function(){
            // 获取父元素
            var ul = document.querySelector("ul");
            // 获取数据
            var date = ["学习中心", "直播课", "价格", "师资", "实操", "问答", "常见问题", "百战故事", "课程更新", "关于我们"];
            
            // 动态插入子元素
            for(var i = 0;i < date.length;i++){
                // 创建子元素
                var li = document.createElement('li');
                li.innerText = date[i];
                ul.appendChild(li)
                
            }
           
        }
    </script>
</head>
<body>
    <ul></ul>
</body>
</html>

总结：

动态创建元素有三种方式：document.write（）,但是这种方法几乎不用，因为这回影响页面的布局，甚至会将页面原来的内容冲刷掉，从而只显示输出内容；

另外就是innerHTML：适合插入的元素比较复杂的时候，如：<div> <div><span></span></div></div>这种嵌套型的代码。

最后就是document.createElement()：比较适合插入单一的元素，会非常方便。

大家可以根据自己的需求进行选择。