html中如何循环显示div

admin
行业动态
2024-04-05
3672

在HTML中，可以使用JavaScript或者jQuery来循环显示div，这里给出一个使用JavaScript的示例：

1、创建一个HTML文件，添加一个<div>元素，用于存放循环生成的内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>循环显示div示例</title>
</head>
<body>
    <div id="content"></div>
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
    <script src="main.js"></script>
</body>
</html>

2、接下来，创建一个名为main.js的JavaScript文件，编写循环显示div的代码：

$(document).ready(function() {
    var content = $('#content');
    for (var i = 1; i <= 5; i++) {
        var div = $('<div></div>').text('这是第' + i + '个div');
        content.append(div);
    }
});

在这个示例中，我们使用了jQuery库来简化DOM操作，当文档加载完成后，我们创建了一个循环，循环5次，每次循环都会创建一个新的<div>元素，设置其文本内容，并将其添加到id为content的元素中。

这样，你就可以在浏览器中看到循环显示的div了。