JS 컨테이너에 for 루프를 사용하여 div를 생성합니다.

-1

컨테이너 내부에 여러 개의 div를 만들려고하지만 기본 컨테이너 내에 생성 된 것들을 중첩하는 방법을 알지 못합니다. html에서 컨테이너를 생성하는 것이 가능하거나 더 나은가요?JS 컨테이너에 for 루프를 사용하여 div를 생성합니다.

function createDiv(numberOfDivs) { 
    var i = 0; 
    var newElement = []; 
    var mainContainer = document.createElement('div'); 

    mainContainer.innerHTML = 'MAIN CONTAINER'; 
    mainContainer.className = 'main'; 
    document.body.appendChild(mainContainer); 

    for (i; i < numberOfDivs; i++) { 
    newElement[i] = document.createElement('div'); 
    newElement[i].style.backgroundColor = '#' + Math.floor(Math.random() * 16777215).toString(16); 
    newElement[i].className = 'box'; 
    newElement[i].id = (i + 1); 
    newElement[i].textContent = 'this is div number: ' + (i + 1); 
    document.body.appendChild(newElement[i]); 
    } 
}; 

createDiv(10);

출처

2016-11-20 HendrikEng

이전에 html로 컨테이너를 생성하고 표시하지 않을 수 있습니다. 그런 다음 js에 클래스를 추가하면됩니다. – theoretisch

[복제본을 순차적으로 생성하는 방법] (http://stackoverflow.com/questions/40707643/generate-3000-squares-procedurally) –

가능한 복제본 : http://stackoverflow.com/questions/40707643/generate-3000-squares-procedurally/40707772#40707772 –

예, 다른 사람이 제안한 것처럼 미리 html로 컨테이너를 만들 수 있습니다. 그런 다음 해당 컨테이너 안에 div를 중첩시킬 수 있습니다.

<html><body><div id="mainContainer" ></div></body></html>

다른 사람들은 당신이 그것을 표시 할 때까지 필요한 경우는 숨겨진 만들기 위해 필요한 CSS를 적용 할 수 있습니다 제안한다. mainContainer 내부

그리고 자바 스크립트 둥지 div의 모든 도움을

function createDiv(numberOfDivs){ 
    var $mainContainer = $("#mainContainer"); 
    for (i; i < numberOfDivs; i++) { 
     var newDiv = $("<div class='box' />"); 

     //...you can add whatever attributes to the div that you want... 

     $mainContainer.append(newDiv); 
    } 
}

출처

2016-11-20 20:48:50

도움을 주셔서 감사합니다, 그냥 그것을 보았지만 모든 비용으로 jquery를 피하려고했습니다. 하지만 주 컨테이너에 추가 도움 :) – HendrikEng

당신이 할 수있는 경우에, 당신은 자바 스크립트를 사용하지 않고 그것들을 만들어야합니다. 그렇지 않으면 새 요소를 document.body에 추가합니다. 그냥 mainContainer으로 변경하십시오.

출처

2016-11-20 20:35:28 Taplar

새로운 요소는 DOM 외부에서 작성한 다음 끝에 모두 추가 할 수 있습니다. –

잘못된 요소를 추가 대상으로 지정하는 것에 대한 내 의견에 어떻게 반영 되나요? – Taplar

그렇지 않습니다. 그러나 : * 가능하다면 자바 스크립트를 사용하지 않고 생성해야합니다. * 올바르지 않습니다. –

자바 스크립트 (.appendChild)를 통해서도 만들 수 있습니다. 원한다면 먼저 자바 스크립트없이 (자바없이) 그들을 만들 수 있고, 필요하다면 예를 들어 display: none을 통해 숨기고 그 다음에는 display: block을 추가하여 보이게 할 수 있습니다.

출처

2016-11-20 20:36:42

덕분에 다른 주제에 대한 링크는 내가 단순히 mainContainer에 차일을 추가하는 것을 잊었다 도왔다.

function createDiv(numberOfDivs) { 
    var i = 0; 
    var newElement = []; 
    var mainContainer = document.getElementById('main'); 

    for (i; i < numberOfDivs; i++) { 
    newElement[i] = document.createElement('div'); 
    newElement[i].style.backgroundColor = '#' + Math.floor(Math.random() * 16777215).toString(16); 
    newElement[i].className = 'box'; 
    newElement[i].id = (i + 1); 
// newElement[i].textContent = 'this is div number: ' + (i + 1); 
    mainContainer.appendChild(newElement[i]); 
    } 
}; 

createDiv(10);

출처

2016-11-20 20:50:26 HendrikEng

JS 컨테이너에 for 루프를 사용하여 div를 생성합니다.

답변

관련 문제