JS에서 DIV 만들기 및 속성 추가

Question

본인의 연습 문제에 도움이 필요합니다. Baisically, 나는 카드 게임을 만들고 싶다. 그리고 여기에 새 div를 작성해야하는 내 코드의 일부가 내 ident 배열에있는 요소 수에 따라 다릅니다. 그리고이 부분은 괜찮습니다. 다음으로 생성 된 div에 ID를 추가하고 싶습니다.

cont의 내용을 루프와 함께 특수 배열의 ID 만 추가하는 다른 함수에 보내려고했으나 제대로 작동하지 않습니다.

그래서 div를 만든 후에 ID를 추가하는 for 루프를 만들었습니다. 그러나 DIV는 CSS 속성 다음에 나타납니다. 먼저 버튼을 클릭 한 후 보일 수있는 것은 테두리이며 div입니다.

어떻게 기능을 변경하고 기능을 변경할 수 있습니까?

var addButton = document.getElementById('button'); 
 
var addButton2 = document.getElementById('button2'); 
 
var obrazy = [ 
 
    "https://www.dropbox.com/s/gqmjk550o35pvna/coin.jpg?raw=1", 
 
    "https://www.dropbox.com/s/gqmjk550o35pvna/coin.jpg?raw=1", 
 
    "https://www.dropbox.com/s/gqmjk550o35pvna/mario-white.jpg?raw=1", 
 
    "https://www.dropbox.com/s/gqmjk550o35pvna/mario-white.jpg?raw=1", 
 
    "https://www.dropbox.com/s/gqmjk550o35pvna/mush.jpg?raw=1", 
 
    "https://www.dropbox.com/s/gqmjk550o35pvna/mush.jpg?raw=1", 
 
    "https://www.dropbox.com/s/gqmjk550o35pvna/plant.jpg?raw=1", 
 
    "https://www.dropbox.com/s/gqmjk550o35pvna/plant.jpg?raw=1" 
 
]; 
 
var ident = [ 
 
    "one", 
 
    "two", 
 
    "three", 
 
    "four", 
 
    "five", 
 
    "six", 
 
    "seven", 
 
    "eight" 
 
]; 
 

 
var output =''; 
 
addButton.onclick = function Loaded(){ 
 
    for(var i =0; i<ident.length; i++){ 
 
    output += '<div onclick="memoryFlipCard(this)"></div>'; 
 
    } 
 
    // document.getElementsByTagName("H1")[0].setAttribute("class", "democlass"); 
 
    var cont = document.getElementById("card_container"); 
 
    cont.innerHTML = output; 
 
    
 
    for(var z=0; z<ident.length;z++){ 
 
    cont.childNodes[z].id = ident[z]; 
 
    } 
 
    
 
}

body{background-color: white;} 
 
#card_container { 
 
    width: 500px; 
 
    height: 250px; 
 
    border-radius: 15px; 
 
    background-color: beige; 
 
    margin: 0 auto; 
 
    padding: 5px; 
 
    
 
} 
 

 
div#card_container > div { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 15px; 
 
    background: url("https://www.dropbox.com/s/gqmjk550o35pvna/bg.png?raw=1"); 
 
    background-size: cover; 
 
    margin: 3px; 
 
    float: left; 
 
} 
 

 
#button { 
 
    width: 70px; 
 
    margin: 0 auto; 
 
    display: block; 
 
    padding:3px; 
 
    margin-top: 5px; 
 
    border-radius: 25px; 
 
    background-color: lightgreen; 
 
    border: none; 
 
} 
 

 
#button2 { 
 
    width: 70px; 
 
    border: none; 
 
    padding: 3px; 
 
    margin: 0 auto; 
 
    display: block; 
 
    margin-top: 5px; 
 
    border-radius: 25px; 
 
    background-color: lightgreen; 
 
} 
 
#one { 
 
    border: 4px solid red; 
 
} 
 

 
#four { 
 
    border: 4px solid red; 
 
}

<div id="card_container"> 
 
    
 
</div> 
 
<button id="button">Add DIVs</button> 
 
<button id="button2">Add IDs</button>

Answer 1

확인은 그것을 가지고 : P 는 지금, 확인인가?

addButton2.onclick = function() { 
 
    **var x = document.getElementById("card_container");** 
 
    for(var z=0; z<ident.length;z++){ 
 
    x.childNodes[z].id = ident[z]; 
 
    } 
 
};