首页原生js循环生成div'

原生js循环生成div'

时间: 2023-08-02 20:22:59 浏览: 82

好的，可以参考下面的代码使用原生JavaScript循环生成8个div： HTML代码： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>循环生成div</title> <link rel="stylesheet" href="style.css"> </head> <body> <main> <div class="container"></div> </main> <script src="script.js"></script> </body> </html> ``` CSS代码： ``` * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Microsoft YaHei", sans-serif; } main { margin: 20px; } .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .item { flex-basis: calc(33.33% - 10px); height: 200px; background-color: #ccc; margin-bottom: 20px; } ``` JavaScript代码： ``` var container = document.querySelector('.container'); for (var i = 1; i <= 8; i++) { var item = document.createElement('div'); item.classList.add('item'); item.textContent = i; container.appendChild(item); } ``` 这个页面中，使用了一个空的<main>元素来作为容器，其中包含一个空的<div>元素，用于动态添加生成的div。在JavaScript代码中，使用了for循环来生成8个div，每个div都带有.item类名，高度为200px，背景颜色为#ccc。生成的div通过appendChild()方法添加到容器中。在CSS代码中，使用Flexbox布局来实现8个div的排列。

阅读全文