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

Question

我怎样才能将单击按钮时创建的相同div附加/附加到HTML中的div中，其中包含类"quickAdds"和"sideMenu，当代码完成时，它仅附加到sideMenu类div，我假设它会覆盖quickAdddiv，因为它是代码的最后一行。我该如何解决这个问题？

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. 将div与quickAdds分离
3. 将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 ">