HTML js for循环实现多个div
作者：野牛程序员：2023-08-23 10:06:43网页设计阅读 3335
可以使用JavaScript的for循环来在HTML中动态创建多个<div>元素。以下是一个示例代码，演示如何使用for循环在HTML中创建多个<div>元素：
<!DOCTYPE html>
<html>
<head>
<title>Creating Multiple Divs with JavaScript</title>
</head>
<body>
<script>
// 获取容器元素
var container = document.body;
// 循环创建10个<div>元素
for (var i = 0; i < 10; i++) {
// 创建<div>元素
var div = document.createElement("div");
div.textContent = "Div " + (i + 1); // 设置内容
div.style.backgroundColor = "lightblue"; // 设置背景颜色
div.style.padding = "10px"; // 设置内边距
div.style.margin = "5px"; // 设置外边距
// 将<div>元素添加到容器中
container.appendChild(div);
}
</script>
</body>
</html>在上面的示例中，JavaScript代码使用for循环创建了10个<div>元素，并通过appendChild方法将它们添加到HTML文档的<body>中。每个<div>元素都有自己的内容、背景颜色、内边距和外边距。
这是一个简单的示例，可以根据需要进行调整。可以进一步修改每个<div>元素的样式、内容和其他属性，以满足需求。
野牛程序员教少儿编程与信息学奥赛-微信|电话：15892516892
- 上一篇：HTML嵌入JS代码的三种方式
- 下一篇：Python获取字典中某一个键的值