使用appendChild循环添加script模板元素失败，求解决方案

你当前代码的核心问题是：profile是同一个DOM节点，DOM体系中每个节点只能存在于一个位置。每次调用appendChild(profile)时，浏览器会把这个节点从它当前所在的位置（第一次是从<script>模板中）移动到目标容器里，所以循环5次后，最终只会看到一个元素——因为节点被移动了5次，而非复制了5次。

下面提供两种基于appendChild的可行实现方案：

方案1：克隆DOM节点（兼容旧环境） #

先将模板的HTML内容解析为DOM元素，每次循环时克隆该元素再添加到目标容器：

window.onload = function() {
  // 获取模板HTML并解析为DOM元素
  const templateHtml = document.getElementById("profileJS").innerHTML.trim();
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = templateHtml;
  const profileTemplate = tempDiv.firstElementChild;

  const appendTarget = document.getElementById("appendchild");
  for(let i=0; i<5; i++) {
    // 深克隆模板元素（true表示复制所有子节点与属性）
    const newProfile = profileTemplate.cloneNode(true);
    appendTarget.appendChild(newProfile);
  }
}

方案2：使用标准<template>标签（推荐） #

将原来的<script type="text/template">替换为HTML5标准的<template>标签，它专门用于存储可复用的DOM片段，操作更简洁规范：

修改后的HTML #

<template id="profileJS">
    <div class="content">
    <div class="logo"></div>
    <div class="name">Profile Name</div>
    <div class="follower">119k</div>
  </div>
</template>

<div id="appendchild"></div>

对应的JavaScript #

window.onload = function() {
  const template = document.getElementById("profileJS");
  const appendTarget = document.getElementById("appendchild");
  
  for(let i=0; i<5; i++) {
    // 导入并克隆模板内容（true表示深克隆完整结构）
    const contentClone = document.importNode(template.content, true);
    appendTarget.appendChild(contentClone);
  }
}

• cloneNode(true)中的true是关键：它会克隆当前元素的所有子节点、属性和事件监听，确保每个新元素都是独立的完整结构。如果传false，只会克隆当前元素本身，不会包含子节点。
• <template>标签的内容不会被浏览器自动渲染，也不会影响页面布局，是专门为复用DOM片段设计的标准方案，比用<script>模拟模板更可靠。

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