Javascript:: 从 innerHTML 到 appendChild

Posted 2023-05-07

【中文标题】Javascript:: 从 innerHTML 到 appendChild

【英文标题】：Javascript:: From innerHTML to appendChild

【发布时间】：2015-04-01 08:00:11

【问题描述】：

所以.. 我知道 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？

【问题讨论】：

So.. I understand that innerHTML is very buggy 怎么样？

他们是这么说的......

【参考方案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重复