时间戳

首页 > 解决方案 > 使用JS在同一div中的其他元素之前插入元素

javascript - 使用JS在同一div中的其他元素之前插入元素

问题描述

我想通过在 parentDiv 中使用 JavaScript 添加 div。我已经在 index.html 文件中创建了一些 div。我希望我将创建的 div 将添加到我在同一 parentDiv 中的 html 中创建的其他 div 之前。我不想删除其他 div。我尝试使用 appendChild 但最后添加了。希望这是有道理的。

function displayBox(data) {
  let html = "";

  data.forEach((box) => {
  const box = document.createElement("div");
  box.classList.add("box");
    html = `
      <a
        target="_blank"
        href="${box.link}"
        class="image fit"
        ><img
            src="${box.img}"
            alt="${box.name}"
        /></a>
        <div class="inner">
        <h3>${box.name} (${box.country})</h3>
        <a
            target="_blank"
            href="${box.link}"
            class="button open-link fit"
            >Visit</a
        >
        </div>
      `;
    box.innerHTML = html;
    thumbnails.appendChild(box);
  });
  
}

thumbnails 是我的 parentDiv，我想在其中添加名为 box 的 div

标签： javascripthtml

解决方案

如果你想在前面添加元素，你可以使用 prepend。

var data = [1,2,3];

var out = document.querySelector("#out");
data.forEach(function (x) {
  var div = document.createElement("div");
  div.textContent = x;
  out.prepend(div);
});
<div id="out">

  <div>Orginal</div>
</div>

如果您不想按逆序排列，您可以反向循环或更改代码以使用 before() 与父元素中的第一个元素。

var data = [1,2,3];

var out = document.querySelector("#out");
const first = out.children[0];
data.forEach(function (x) {
  var div = document.createElement("div");
  div.textContent = x;
  first.before(div);
});
<div id="out">

  <div>Orginal</div>
</div>

推荐阅读