<分区>
javascript - 追加到 DOM 后，div 标签内的 div 标签不会出现
标签 javascript css
我正在编写一个函数来创建两张卡片 - 一张是方形的，另一张是圆形的，在单击按钮时显示。当按下另一个按钮时，将添加更多样式。 但我遇到的问题是 div squareMainID 和 roundMainID 它们在 div 中具有相同数量的 div。当 div 显示在 DOM 上时，只会显示 roundMainId 的 div 标签和子标签(见图)。如果您可以看到开发工具，则 roundMainID 旁边的黑色箭头是可折叠的。 SqaureMainID 不一样。甚至我尝试应用的样式也只应用于 roundMainID 而不是正方形。为什么会发生这种情况以及如何解决？
代码:
var pick= document.getElementById("pick");
var attachCardsDiv = document.createElement("div");
attachCardsDiv.className += "attach-cards-div"
var squareMainDiv = document.createElement("div");
squareMainDiv.className = "cardsPanel";
squareMainDiv.setAttribute("id", "squareMainID");
var roundMainDiv = document.createElement("div");
roundMainDiv.className = "cardsPanel";
roundMainDiv.setAttribute("id", "roundMainID");
var classADiv = document.createElement("div");
var classBDiv = document.createElement("div");
var apple = document.createElement("div");
var banana = document.createElement("div");
function attachTwoCardsOnDom(){
classBDiv.appendChild(banana);
classBDiv.appendChild(apple);
classADiv.appendChild(classBDiv)
squareMainDiv.appendChild(classADiv).addEventListener('click',
function(event){
console.log("clicked");
});
attachCardsDiv.appendChild(squareMainDiv);
document.body.appendChild(attachCardsDiv);
// ************************************************************
classBDiv.appendChild(banana);
classBDiv.appendChild(apple);
classADiv.appendChild(classBDiv)
roundMainDiv.appendChild(classADiv).addEventListener('click',
function(event){
console.log("clicked");
});
attachCardsDiv.appendChild(roundMainDiv);
document.body.appendChild(attachCardsDiv);
}
pick.addEventListener('click', function(event){
attachTwoCardsOnDom();
})
html:
<button id="pick">Press</button>
最佳答案
在:
var classADiv = document.createElement("div");
var classBDiv = document.createElement("div");
var apple = document.createElement("div");
var banana = document.createElement("div");
您只需创建一次 div，然后在:
function attachTwoCardsOnDom(){
classBDiv.appendChild(banana);
classBDiv.appendChild(apple);
classADiv.appendChild(classBDiv)
您只需移动它们。
也就是说，您实际上是在向 squareMainDiv 添加内容，但稍后在将 div 添加到 roundMainDiv 时，您会将它们从中删除。
修复:您必须每次都重新创建 div:
function attachTwoCardsOnDom(){
var classADiv = document.createElement("div"); // creating here
var classBDiv = document.createElement("div"); // creating here
var apple = document.createElement("div"); // creating here
var banana = document.createElement("div"); // creating here
classBDiv.appendChild(banana);
classBDiv.appendChild(apple);
classADiv.appendChild(classBDiv)
squareMainDiv.appendChild(classADiv).addEventListener('click',
function(event){
console.log("clicked");
});
attachCardsDiv.appendChild(squareMainDiv);
document.body.appendChild(attachCardsDiv);
// ************************************************************
var classADiv2 = document.createElement("div"); // creating here, different name
var classBDiv2 = document.createElement("div"); // creating here, different name
var apple2 = document.createElement("div"); // creating here, different name
var banana2 = document.createElement("div"); // creating here, different name
classBDiv2.appendChild(banana2); // notice classBDiv2 (2!)
classBDiv2.appendChild(apple2); // and on...
classADiv2.appendChild(classBDiv2)
roundMainDiv.appendChild(classADiv2).addEventListener('click',
function(event){
console.log("clicked");
});
attachCardsDiv.appendChild(roundMainDiv);
document.body.appendChild(attachCardsDiv);
}
演示 JSFiddle:https://jsfiddle.net/acdcjunior/s41ax3rb/3/
关于javascript - 追加到 DOM 后，div 标签内的 div 标签不会出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49419830/