Question

我该如何在HTML中使用“ quickAdds”和“ sideMenu”类将按钮单击到div上时附加/添加相同的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);

将执行以下操作：

将div插入quickAdds
从div分离quickAdds
将div插入sideMenu

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

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

Answer 2

元素是对象。当您创建它们时，它们是唯一的，这就是为什么在像您一样移动节点时，它不会重复自身，而元素节点实际上是被移动的。

我们可以使用object.assign复制一个对象，甚至是一个元素，但是这里的问题是，您有几个嵌套的元素。为了正确附加它们，必须单独复制其中的每一个。在这种情况下，最好单独创建它们，或者最好在循环或函数调用中创建它们。

对于这种情况，我通常使用函数式编程来解决问题，或者至少减轻代码的负担。

首先要创建一个简单的create函数，我们可以根据需要进行调整。

function create(ele, params = {}) {
return Object.assign(document.createElement(ele), params);
}

let h2;
console.log( h2 = create("h2", { className: "blue", textContent: "hiya!" } )); 

document.body.appendChild(h2);

.blue {
background: blue;
width: 100px;
height: 100px;
color: white;
}

您可以扩展它以便在您的代码中使用。这是一个简单的示例，说明了它如何工作，但是如果正确使用该函数，也可以大大简化此过程。我不会深入探讨这个问题，因为它超出了此答案的范围，但这并不难想象。

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 = create("div"), div2 = create("div");
  
  var h = create("h2", { textContent: titleInput.value }), 
  h2 = create("h2", { textContent: titleInput.value });
  
  var p = create("p", {textContent: taskDescription.value }), 
  p2 = create("p", {textContent: taskDescription.value });
  

  div.appendChild(h); div2.appendChild(h2);
  div.appendChild(p); div2.appendChild(p2);
  
  quickAdds.prepend(div);
  sideMenu.prepend(div2);
});

function create(ele, params = {}) {
return Object.assign(document.createElement(ele), params);
}

.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>
    <button id="enterBtn">add task or whatever</button>
  </div>
</div>




<div class="quickAdds">


</div>

<input type="text" id="textField">
<input type="text" id="titleInput" value="hihihhihi">
<input type="text" id="taskDescriptionBox" value="this is a description ">

将div附加到两个单独的div

2 个答案: