在追加到DOM

Question

我正在编写一个功能来创建两张卡片 - 一个是方形的，另一个是圆形的，可以在按钮的单击上显示。按下另一个按钮时，会添加更多样式。 但我遇到的问题是div squareMainID和roundMainID都在div中有相同数量的div。当div显示在DOM上时，只显示roundMainId的div标签和子项（见图）。如果您可以看到开发工具，则roundMainID旁边的黑色箭头是可折叠的。 SqaureMainID不一样。即使我尝试应用的样式也仅应用于roundMainID而不应用于square。为什么会发生这种情况以及如何解决？

代码：

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>

Answer 1

在：

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/