javascript - 将一个 div 附加到两个单独的 div

Question

我如何将单击按钮时创建的相同 div 添加/添加到 HTML 中带有类“quickAdds 和”sideMenu 的 div，当代码完成时它只添加到 sideMenu 类 div，我假设它覆盖了quickAdds div 因为它是代码的最后一行。我该如何解决这个问题？

var addTaskBtn = document.querySelector("#enterBtn");
var titleInput = document.querySelector("#textField");
var taskDescription = document.querySelector("#taskDescriptionBox");
var quickAdds = document.querySelector(".quickAdds");
var sideMenu = document.querySelector(".sideMenu");



addTaskBtn.addEventListener("click", function() {
  var div = document.createElement("div");
  var h = document.createElement("h2");
  var p = document.createElement("p");
  h.textContent = titleInput.value;
  p.textContent = taskDescription.value;
  div.appendChild(h);
  div.appendChild(p);
  quickAdds.prepend(div);
  sideMenu.prepend(div);
});

.sideMenuContainer {
  /* display: none; */
  display: block;
  height: 100vw;
  width: 550px;
  position: absolute;
  background: #343434a4;
}

.sideMenu {
  display: grid;
  grid-template-columns: 1fr;
  width: 550px;
  margin: 0;
}

.sideMenuTask {
  height: auto;
  width: 100%;
  color: white;
  margin: 0;
}

.quickAdds {
  background: springgreen;
  height: auto;
  grid-gap: 5px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 3px solid black;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
}

<div class="sideMenuContainer">
  <div class="sideMenu">

    <div class="sideMenuTask">
      <h1>heading of tasks</h1>
      <p>Body of tasks</p>
    </div>

  </div>
</div>




<div class="quickAdds">


</div>

Answer 1

tldr;您需要创建两个 div 元素。

使用 prepend 时/appendChild DOM 将保留对元素的引用，而不是值。

这意味着它运行以下代码:

quickAdds.prepend(div);
sideMenu.prepend(div);

将执行以下操作:

1. 将 div 添加到 quickAdds
2. 从 quickAdds 中分离 div
3. 将 div 添加到 sideMenu

为了prepend 两者，您需要创建两个div 元素。例如

const div = document.createElement('div');
const div2 = document.createElement('div');
quickAdds.prepend(div);
sideMenu.prepend(div2);