时间戳

首页 > 解决方案 >
使用 JavaScript 不能正常工作？

javascript -
使用 JavaScript 不能正常工作？

问题描述

当我<br>通过 DOM 添加时，它不能正常工作......<br>它没有做它的工作。其他一切都工作得很好。我觉得是.append()方法有问题...

输出的图像。 这是现场演示 （注意：现场演示现已修复。但下面的代码是非固定的） 这是代码：

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

标签： javascripthtmlcssdomappend

解决方案

使用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);
});

推荐阅读