div 요소를 만들고 동적으로 자식 요소를 추가하십시오.

Question

어떻게 요소를 자바 스크립트로 만들고 요소를 동적으로 추가합니까?

HTML에이 요소를 만들고 요소를 동적으로 추가하면 정상적으로 작동합니다.

<!-- THIS WILL WORK --> 
<div id="wrapper"></div> 

하지만이 작동하지 않습니다

// THIS WILL NOT WORK 
var container = document.createElement('div'); 
container.id = "wrapper"; 

추가 코드 :

var html = '<div><ul>'; 

for(var i=1; i<=40; i++){ 
    html+= "<li>Testing: "+i+"</li>"; 
} 

html+= '</ul></div>'; 

$('#wrapper').append(html); 

Fiddle

Answer 1

var container = document.createElement('div'); 
container.id = "wrapper"; 

var layout = document.getElementById('layout'); 
layout.appendChild(container); 

var html = '<div><ul>'; 

for(var i=1; i<=40; i++){ 
    html+= "<li>Testing: "+i+"</li>"; 
} 

html+= '</ul></div>'; 

container.innerHTML = html; 

는 코드의

Answer 2

당신은 요소를 추가 appendChild(element)를 호출해야합니다. 예를 들어 :

var h1 = document.createElement("h1"); 
h1.textContent = "Title"; 
document.body.appendChild(h1); 

귀하의 경우에는이 있습니다 :

이

var parent = document.body; // or another one like document.getElementById("othercontainer") 
parent.appendChild(container); 

Answer 3

당신은 다음과 같이 jQuery를 사용할 수 있습니다

$(document).append('<div id="wrapper" />'); 

Answer 4

당신은 당신의 HTML 페이지에 래퍼를 삽입해야합니다.

이 작동합니다 :

HTML :

<div id="layout"> 

</div> 

JS를 :

$(function() { 
var container = document.createElement('div'); 
container.id = "wrapper"; 

$('body').append(container); 

var html = '<div><ul>'; 

for(var i=1; i<=40; i++){ 
    html+= "<li>Testing: "+i+"</li>"; 
} 

html+= '</ul></div>'; 

$('#wrapper').append(html); 
}); 

012 : 여기

http://jsfiddle.net/Zd2rw/