如何優雅的用js動態的添加html代碼？
如果需要在js里動態的加載一些html代碼，一般會選擇下面這樣的方式str="親愛的提示條您真的要GG嗎？ "但是感覺這樣太丑了，可讀性和可維護性都很差。有什么更加優雅和簡潔的方式嗎？
查看完整描述
2 回答
qq_花開花謝_0
TA貢獻1835條經驗 獲得超7個贊
把你想要的結構寫在HTML里，用一個display：none的標簽來包裹，一般而言，會使用：不設置為type="text/javascript"的script標簽textarea標簽如親愛的提示條
您真的要GG嗎？ 或親愛的提示條
您真的要GG嗎？ 使用這些標簽，是為了避免這些不被直接使用的標簽一被瀏覽器讀取到就被渲染。而且這樣做的話，里面的img的src也不會被瀏覽器自動獲取。如果你使用script標簽，就可以如下代碼得到它：//使用script包裹vartemplate=document.getElementById("theTemplate").innerHTML;//使用textarea包裹vartemplate=document.getElementById("theTemplate").value;使用時textarea時要注意，textarea無法嵌套自身；script標簽也無法自嵌套。但如果文檔結構是固定的，里面的數據需要動態填充呢？請參考面向數據編程。P.S.對于innerHTML和value的使用可能會造成XSS。動態添加HTML代碼，前端若由模板導出，在JS里面寫結構，或者在HTML里面寫結構，這個結構對于黑客來說都是白盒的，白盒攻擊相對簡單，黑客可以通過閱讀代碼來看到哪一些代碼可以被利用。比如$用戶簽名$，發現這里的用戶簽名是用戶可控制的數據之后，黑客可以構造一個之類的用戶簽名，未經過濾<>的話，就可以做到XSS。因此，在面向數據編程里講到的方案中，通過json進行動態匹配替換時，一定要保證后端輸出的數據JSON里，<、>等語義敏感的字符正確轉義。
