如何让JavaScript多次向HTML文档输出内容？

你遇到的问题核心是DOM元素在文档树中只能存在一个位置。你的代码里只创建了一个<div>实例（added），第一次append是把它加入body，第二次append其实是将这个元素从当前位置移动到body末尾，并非复制，所以页面只会显示一次内容。

以下是几种修复方案：

方案1：重复创建新元素实例 #

直接两次执行创建元素的逻辑，生成独立的DOM元素：

var a = "asd";

// 第一次添加
let added1 = document.createElement("div");
let addedP1 = document.createElement("p");
addedP1.innerText = a;
added1.append(addedP1);
document.body.append(added1);

// 第二次添加
let added2 = document.createElement("div");
let addedP2 = document.createElement("p");
addedP2.innerText = a;
added2.append(addedP2);
document.body.append(added2);

方案2：克隆已有元素 #

使用cloneNode(true)深度克隆元素（参数true表示同时克隆子元素）：

var a = "asd";
let added = document.createElement("div");
let addedP = document.createElement("p");
addedP.innerText = a;
added.append(addedP);

document.body.append(added);
// 克隆并添加副本
let addedClone = added.cloneNode(true);
document.body.append(addedClone);

方案3：封装函数复用逻辑 #

把创建元素的代码封装成函数，调用两次即可：

function addContent() {
  const text = "asd";
  const container = document.createElement("div");
  const paragraph = document.createElement("p");
  paragraph.innerText = text;
  container.append(paragraph);
  document.body.append(container);
}

// 调用两次生成两个元素
addContent();
addContent();

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