js实现10个div换行

在JavaScript中实现10个div元素换行，可以通过多种方式来实现。以下是一个简单的示例，展示如何使用JavaScript动态创建10个div元素，并将它们添加到页面中，每个div元素占据一行。

HTML结构

首先，确保你的HTML文件中有一个容器来放置这些div元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Div Wrap Example</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
        }
        .box {
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: #4CAF50;
        }
    </style>
</head>
<body>
    <div class="container" id="container"></div>
    <script src="script.js"></script>
</body>
</html>

JavaScript代码

接下来，在script.js文件中编写JavaScript代码来动态创建和添加div元素：

document.addEventListener("DOMContentLoaded", function() {
    const container = document.getElementById('container');

    for (let i = 0; i < 10; i++) {
        const div = document.createElement('div');
        div.className = 'box';
        div.textContent = `Div ${i + 1}`;
        container.appendChild(div);
    }
});

解释

HTML部分：
- 创建一个div元素，类名为container，作为所有div元素的父容器。
- 引入一个外部JavaScript文件script.js。

CSS部分：
- 使用Flexbox布局，将.container的flex-direction设置为column，这样每个子元素（即每个div）都会垂直排列，实现换行效果。
- 设置每个div的样式，包括宽度、高度、边距和背景颜色。
JavaScript部分：
- 使用DOMContentLoaded事件确保DOM完全加载后再执行脚本。
- 获取container元素。
- 使用for循环创建10个div元素，每个div元素设置类名为box，并添加文本内容。
- 将每个创建的div元素添加到container中。