<br> 使用 JavaScript 无法正常工作？

Question

当我通过 DOM 添加 <br> 时，它无法正常工作... <br> 没有发挥作用。其他一切都工作得很好。 我认为 .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;
}

Answer 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);
});

Answer 2

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

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);

<br> 使用 JavaScript 无法正常工作？

<br> not working properly using JavaScript?

html

javascript

css

dom

append