如何使用JavaScript让指定HTML元素在页面中重复显示4次？

嘿，我来帮你搞定这两个问题！

一、通用实现思路：让元素重复显示的几种方法 #

这里有几个实用的JavaScript方法可以实现元素重复展示：

• 克隆元素法：先获取目标元素，通过cloneNode(true)完成深克隆（true表示连带子元素和内容一起复制），再循环把克隆后的元素添加到页面指定位置
• HTML字符串拼接法：提取目标元素的HTML内容，循环拼接成重复的字符串，最后插入到页面容器中
• 动态创建元素法：如果不需要基于现有元素，也可以直接用document.createElement()创建新元素，设置好内容和样式后循环添加到页面

二、针对你给出的具体代码的解决方案 #

给定你的HTML和CSS代码：

<div class="box"> I am a box. </div>

.box { border: 1px solid green; }

我给你两种可行的方式补全JavaScript代码，让.box元素显示4次：

方法1：克隆现有元素 #

// 获取原box元素
const originalBox = document.querySelector('.box');
// 获取原元素的父容器（这里用body，你也可以指定其他容器）
const parentContainer = originalBox.parentElement;

// 循环3次（原元素已存在1次，再克隆3次就凑够4次）
for (let i = 0; i < 3; i++) {
  // 深克隆原元素
  const clonedBox = originalBox.cloneNode(true);
  // 将克隆元素添加到父容器末尾
  parentContainer.appendChild(clonedBox);
}

方法2：HTML字符串拼接 #

// 获取原box的完整HTML代码
const boxHtml = document.querySelector('.box').outerHTML;
// 拼接4份相同的HTML字符串
let repeatedContent = '';
for (let i = 0; i < 4; i++) {
  repeatedContent += boxHtml;
}
// 把拼接好的内容插入到body中（如果页面有其他内容，建议用专门的容器替换，避免覆盖原有内容）
document.body.innerHTML = repeatedContent;

小提醒：如果不想保留页面原本的.box元素，可以先把它移除，再插入4个新的克隆元素，按需调整即可。

内容的提问来源于stack exchange，提问作者w3Develops