자바 스크립트 :: innerHTML을에서이

Question

을에 appendChild합니다 그래서 .. 나는 (내 코드에서 완벽하게 작동하고 있지만)하지만 난에 appendChild에 innerHTML을에서 내 코드를 은밀한 선호 innerHTML을 매우 버그가 있음을 이해합니다.

JSFiddle : 내 코드 여기 http://jsfiddle.net/qrLsjjdg/

을 (완벽하게 작동한다)된다

<style> 
#gangina 
{ 
    clear:both; 
    float:left 
} 
</style> 

<div id=myBox> 
    <div id=hezi></div> 
    <a href="#" id=gangina>attach another file</a> 
</div> 

<script> 
window.onload=appendMore; 
document.getElementById("gangina").addEventListener("click",appendMore); 

function appendMore() 
{ 
    hezi.innerHTML+="<div id=ganginaUploadBox style='clear:both;float:left'><progress id=hezi></progress><button id=yehezkel>Upload</button></div>"; 
} 
</script> 

하지만 ...가 어떻게에 appendChild로 모두 변환합니까?

Answer 1

수행하는 corretct 것은이 같은 몇 가지 요소를 생성하고 DOM에를 추가하는 것입니다

div = document.createElement("div"); 
div.style="clear:both;float:left"; 
div.id="ganginaUploadBox"; 
p = document.createElement("progress"); 
p.id="heziProgress"; 
b = document.createElement("button"); 
b.id="yehezkel"; 
div.appendChild(p); 
div.appendChild(b); 

업데이트 바이올린 : http://jsfiddle.net/qrLsjjdg/1/

PS : 중복 ID에 대해 조심