jquery append 여러 항목을 하나의 컨테이너에 넣으십시오.

Question

문제가 발생합니다. Firebug에서 HTML을 볼 때 컨테이너에 2 개의 객체가 있지만 1 개의 img 만 보여줍니다! 첫 번째 appendTo 다음 두 번째 이미지가 표시됩니다 내가 주석 경우,

var img1 = $("<img />", {src : "myimg.png" }); 
var img2 = $("<img />", {src : "myimg2.png" }); 
img1.appendTo("#div"); 
img2.appendTo("#div"); 

<div id="div"></div> 

그러나 첫 번째 이미지가 표시됩니다, 또는 내가 순서를 반대로하면 2가 표시됩니다 :

나는 아주 간단한 코드를 첫 번째가 아닙니다.

Answer 1

이것은 실제로 appendTo와 관련이 없지만 #div 및 이미지 크기와 관련이 있습니다. 이상한.

Answer 2

기본 자바 스크립트로 요소를 추가하는 방법을 보여줄 수 있습니까? 그것은 더 빠르고 매우 유사한 구문입니다. 또한 더 나은 프로그래머가 될 것입니다.

우선, 아직 체크 아웃하지 않은 경우 자바 스크립트 템플릿을 체크 아웃하십시오. 개인적으로 http://handlebarsjs.com/을 사용합니다.

어쨌든, 여기에 자바 스크립트로 원하는 것을 할 수 있습니다.

var parentElement = document.getElementById("div"); 
var fragment = document.createDocumentFragment(); 

["myimg.png", "myimg2.png"].forEach(function(src) { 
var element = document.createElement("img"); 
element.src = src; 
fragment.appendChild(element); 
}); 

parentElement.appendChild(fragment);