Когда я добавляю <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;
}
0
Jithin 22 Сен 2021 в 18:11

2 ответа

Лучший ответ

Использование document.createElement() создает только 1 элемент, и вы можете добавить его в дом только один раз. Создание второго или клонирование 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);
});

3
just_Mango 22 Сен 2021 в 15:17

Каждый раз, когда вы добавляете элемент <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);
0
Anna Acker 22 Сен 2021 в 15:28