在 JavaScript 中动态创建多个重复元素

介绍

在 Web 开发中经常需要动态地创建多个重复的元素，如创建一个列表、生成相同样式的按钮等。在 JavaScript 中可以通过编写代码实现动态创建多个重复元素。

方法

1. 使用 document.createElement()

使用 JavaScript 的 document.createElement() 方法可以动态创建元素。通过在代码中循环多次调用该方法可以实现创建多个重复元素的效果。以下是一个示例：

// 创建 ul 元素
var ul = document.createElement('ul');

// 循环创建 li 元素
for (var i = 0; i < 5; i++) {
  var li = document.createElement('li');

  // 为 li 元素添加文本内容
  var text = document.createTextNode('List item ' + i);
  li.appendChild(text);

  // 将 li 元素添加到 ul 元素中
  ul.appendChild(li);
}

// 将 ul 元素添加到页面中的某个元素中
var container = document.getElementById('container');
container.appendChild(ul);

2. 使用 innerHTML

在 JavaScript 中也可以使用 innerHTML 属性来动态创建元素。该属性可用于设置或返回元素的 HTML 内容。以下是一个示例：

// 获取页面中的某个元素
var container = document.getElementById('container');

// 使用 innerHTML 属性创建多个重复元素
container.innerHTML = '';
for (var i = 0; i < 5; i++) {
  container.innerHTML += '<div>List item ' + i + '</div>';
}

总结

以上介绍了在 JavaScript 中动态创建多个重复元素的两种方法：使用 document.createElement() 和 innerHTML。具体使用方法根据实际需求选择。

注意事项：

• 为避免页面加载过慢，应尽量避免使用 innerHTML 创建大量元素；
• 动态创建的元素不会自动添加到页面中，需要手动将其添加到对应的元素中。