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

正确的做法是创建一些元素并将它们附加到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

Javascript ::从innerHTML到appendChild

1 个答案: