javascript div 요소를 만들고 내용을 추가하십시오.

Question

div 요소를 만들고 그 안에 내용을 거의 추가하지 않고 모든 요소를 ​​추가 한 후에 div 요소의 내용을 표시하려고합니다.

임 아래의 코드를 사용하여 div 요소는 HTML에 표시되지 않는 몇 가지 이유 ...

http://jsfiddle.net/KVe9K/

JS 코드

container = $("<div/>", { "class": "container" }); 
$(".container").append("<b>Appended text</b>"); 
$(".container").append("<b>Appended text</b>"); 
$(".container").append("<b>Appended text</b>"); 
$(".container").append("<b>Appended text</b>"); 
$(".container").append("<b>Appended text</b>"); 

CSS 코드 :

.container{ 
    height:100px; 
    width:100px; 
    background-color:black; 
} 

div 요소는 HTML에 표시되지 않는 몇 가지 이유

Answer 1

0 ... 당신이 DOM 어디서나 container을 두지 않기 때문에이다

. 요소를 만들었지 만 페이지에 아무 것도 추가하지 않았습니다.

원하는 페이지에 추가하십시오.

container.appendTo(document.body); 

을 ...하지만 당신은 당신이 원하는 어떤 다른 특정 장소가 가능성이있어 : 예를 들어, 이것은 body 요소에 추가합니다.

또한 jQuery를 포함하지 않았기 때문에 바이올린이 작동하지 않으므로 $은 정의되지 않은 기호입니다.

여기 jQuery를을 포함하는 바이올린의, 그리고 DOM에 요소를 추가합니다 : 당신이 의미하는 경우 http://jsfiddle.net/KVe9K/1/

---

, 왜 당신의 append 전화가 작동, 그것은 요소가 아닌 있기 때문에 DOM이 아직 없으므로 .container 선택자와 일치하지 않습니다. 당신은하지만,이 작업을 수행 할 수 있습니다

container = $("<div/>", { "class": "container" }); 
container.append("<b>Appended text</b>"); 
container.append("<b>Appended text</b>"); 
container.append("<b>Appended text</b>"); 
container.append("<b>Appended text</b>"); 
container.append("<b>Appended text</b>"); 
container.appendTo(document.body); // Or whereever 

Further updated fiddle

는

Answer 2

container = $("<div/>", { "class": "container" }); 

이 등이 DOM 요소에 DIV를 추가하지 않습니다.