原生JS创建节点和插入节点属性

最新推荐文章于 2024-01-29 19:30:27 发布

wasbsbsb

最新推荐文章于 2024-01-29 19:30:27 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_45343326/article/details/102755820

本文介绍了一种使用JavaScript动态生成包含15个列表项的HTML列表的方法。通过获取指定ID的元素，创建并附加新的<li>节点，以及为每个列表项添加图片，实现了列表的动态构建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


```javascript
 				 <ul id="box">
                    <script>
                        // 代码挪后执行
                        window.onload = function () {
                            // 寻找节点
                            var box = window.document.getElementById('box');
                            // 循环15次嘛
                            for (var i = 0; i < 15; i++) {
                                // 创建节点
                                var box2 = document.createElement("li");
                                // 创建LI节点
                                var li = document.createElement('img');
                                // 赋予LI节点图片路径
                                li.src = "./images/2313png.png";
                                // 给变量节点添加元素；
                                box2.appendChild(li);
                                box.appendChild(box2);
                            }
                        }
                    </script>
                </ul>