Javascript :: From innerHTML to appendChild

Question

Итак .. Я понимаю, что innerHTML очень глючит (хотя в моем коде он работает отлично), но я предпочитаю скрывать свой код от innerHTML до appendChild.

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: следить за дублированные идентификаторы