如何優雅的用js動態的添加html代碼?

把想要的結構寫在HTML里，用一個display：none的標簽來包裹。

一般而言，會使用：

• 不設置為type="text/javascript"的script標簽
• textarea標簽

<script type="text/html" id="theTemplate"> 編寫你的html結構 </script>

或

<textarea id="theTemplate" style="display:none">
編寫你的html結構
</textarea>

使用這些標簽，是為了避免這些不被直接使用的標簽一被瀏覽器讀取到就被渲染。而且這樣做的話，里面的img的src也不會被瀏覽器自動獲取。

如果你使用script標簽，就可以如下代碼得到它：

//使用script包裹 var template = document.getElementById("theTemplate").innerHTML ; //使用textarea包裹 var template = document.getElementById("theTemplate").value ;

使用時textarea時要注意，textarea無法嵌套自身；script標簽也無法自嵌套。