JavaScript操作DOM添加<br>标签不生效无法正常换行问题求助

你创建的<br>是单个DOM节点，DOM节点具备唯一性，无法同时存在于文档树的两个位置。代码中先通过profile.append(img, hr, name, br, email)将br插入到了姓名文本和邮箱文本之间，紧接着执行的document.body.append(profile, br)会把已经插入到profile内部的br节点移动到body中，因此profile内姓名和邮箱之间的换行标签消失，自然无法实现预期的换行效果。

创建两个独立的br节点，分别用于profile内部的换行，以及profile外部和后续内容的分隔：

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);
  // 分别创建两个独立的br节点
  const innerBr = document.createElement("br");
  const outerBr = document.createElement("br");
  const email = document.createTextNode("Email: " + person.email);
  profile.append(img, hr, name, innerBr, email);
  document.body.append(profile, outerBr);
});

原有CSS代码无需修改，即可正常实现姓名和邮箱之间的换行效果。

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