jQuery 根据数组元素创建div

在本文中，我们将介绍如何使用jQuery根据数组元素创建div。

创建div元素

首先，我们需要一个数组，该数组包含我们要创建的每个div的内容。假设我们有以下的数组：

var array = ["apple", "banana", "orange"];

现在，让我们使用jQuery来创建div元素，并将数组元素插入到这些div中。我们可以使用$("<div>")来创建一个新的div元素。然后，我们将数组元素作为文本插入到div中，并使用appendTo()方法将这些div插入到指定的父元素中。

$.each(array, function(index, value) {
  $("<div>").text(value).appendTo("#container");
});

在上面的代码中，$.each()方法用于遍历数组中的每个元素。在每次迭代中，我们创建一个新的div元素，将数组元素作为文本插入到div中，并将其插入到id为#container的父元素中。

示例

假设我们有一个HTML页面，其中包含一个id为#container的空的div元素。我们可以通过以下代码将数组元素插入到div中：

<div id="container"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  var array = ["apple", "banana", "orange"];

  .each(array, function(index, value) {("<div>").text(value).appendTo("#container");
  });
</script>

当我们在浏览器中加载页面时，我们将看到生成的div元素如下所示：

<div id="container">
  <div>apple</div>
  <div>banana</div>
  <div>orange</div>
</div>

动态添加元素

除了使用静态数组，我们还可以动态添加元素并将它们插入到div中。让我们看一个示例：

var array = [];

("#addBtn").click(function() {
  var inputVal =("#textInput").val();
  array.push(inputVal);

  $("<div>").text(inputVal).appendTo("#container");
});