在HTML中动态循环div
时间: 2024-02-19 10:03:53 浏览: 84
HTML5无限循环滚动图片展示
要在HTML中动态循环div,需要结合JavaScript和CSS来实现。以下是一个简单的例子,演示如何使用JavaScript和CSS来动态循环div:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<p>点击按钮生成div:</p>
<button onclick="createDiv()">生成</button>
<script>
function createDiv() {
var container = document.getElementById("container"); // 获取容器
for (var i = 0; i < 5; i++) {
var div = document.createElement("div"); // 创建div元素
div.className = "box"; // 设置div的class为box
container.appendChild(div); // 将div添加到容器中
}
}
</script>
<div id="container"></div> <!-- 容器,用于包含动态生成的div -->
</body>
</html>
```
在上述例子中,点击“生成”按钮会动态生成5个class为“box”的div元素,并添加到id为“container”的容器中。CSS样式中的“float: left”属性使得div元素排列在一行中,如果容器宽度不够,后面的div元素会自动换行。通过JavaScript的循环语句和createElement()方法,可以动态创建任意数量的div元素并添加到页面中。
阅读全文