使用 JavaScript 不能正常工作？答案

【问题标题】： not working properly using JavaScript? 使用 JavaScript 不能正常工作？
【发布时间】：2021-11-16 01:57:33
【问题描述】：

当我通过 DOM 添加  时，它无法正常工作...   没有做好它的工作。其他一切都运行良好。 我认为.append() 方法有问题...

Here is the live demo （注意：现场演示现已修复。但下面的代码是非修复的） 代码如下：

JS：

const urls = [
  {
    src:
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtFPba2-cBeIyhZ3Sxlkd2fGZegsdcqEEoww&usqp=CAU",
    name: "John Doe",
    email: "foobar@example.com"
  }
];
urls.forEach((person) => {
  const profile = document.createElement("div");
  const img = document.createElement("img");
  img.src = person.src;
  const hr = document.createElement("hr");
  const name = document.createTextNode("Name: " + person.name);
  const br = document.createElement("br");
  const email = document.createTextNode("Email: " + person.email);
  profile.append(img, hr, name, br, email);
  document.body.append(profile, br);
});

CSS：

div {
  border: 5px solid #ca6702;
  width: 300px;
  height: 500px;
  margin: 0 auto;
  background-color: #2a9d8f;
}

img {
  width: 300px;
  border: 4px solid #264653;
  box-sizing: border-box;
  border-radius: 50%;
}

hr {
  height: 3px;
  background-color: #e9d8a6;
}

【问题讨论】：

嗨，欢迎来到 SO。请先拨打tour。然后阅读how to ask questions here。之后编辑问题以符合准则并提供minimal reproducible example 以获取调试详细信息。另请阅读：Can I just link to my website? 这也适用于任何其他外部资源。
也许我错了，但我看不出这个问题有什么问题@tacoshy
@MorKadosh 它在问题本身中不包含有效的minimal reproducible example。该问题需要使用外部资源或 IDE 来重现问题。
@Jithin，你应该把它变成一个代码 sn-p。
How do I ask a good question?: "描述问题。“它不起作用”不足以帮助人们理解你的问题。相反，告诉其他人读者预期的行为应该是什么。告诉其他读者错误消息的确切措辞是什么，以及产生它的代码行。"

标签： javascript html css dom append

【解决方案1】：

使用document.createElement() 只会创建 1 个元素，并且您只能将其附加到 dom 一次。创建第二个或克隆您的 br 应该可以解决您的问题。

const urls = [
  {
    src:
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtFPba2-cBeIyhZ3Sxlkd2fGZegsdcqEEoww&usqp=CAU",
    name: "John Doe",
    email: "foobar@example.com"
  }
];
urls.forEach((person) => {
  const profile = document.createElement("div");
  const img = document.createElement("img");
  img.src = person.src;
  const hr = document.createElement("hr");
  const name = document.createTextNode("Name: " + person.name);
  const br = document.createElement("br");
  const br2 = document.createElement("br");
  
  const email = document.createTextNode("Email: " + person.email);
  profile.append(img, hr, name, br, email);
  document.body.append(profile, br2);
});

【讨论】：

是的，它解决了问题。我不知道...非常感谢！
模板引擎（或者当您可以确定urls 的内容永远不会包含任何用户控制的内容时只是一个模板文字）将是一个可行的选择。
来自.appendChild()，但对于.append()也是一样的：" Node.appendChild()方法在指定父节点的子节点列表末尾添加一个节点。如果给定的子节点是对文档中现有节点的引用，appendChild() 会将其从当前位置移动到新位置（在将节点附加到某个其他节点）。这意味着一个节点不能同时在文档的两个点。”

【解决方案2】：

每次附加  元素时，都需要再创建一次以再次附加它。在您的情况下，它可能如下所示：

const br1 = document.createElement("br");
const email = document.createTextNode("Email: " + person.email);
profile.append(img, hr, name, br1, email);
const br2 = document.createElement("br");
document.body.append(profile, br2);

【讨论】：