首頁猿問如何優(yōu)雅的用js動態(tài)的添加html代碼？

如何優(yōu)雅的用js動態(tài)的添加html代碼？

JavaScript

翻閱古今 2019-04-08 11:16:45

如果需要在js里動態(tài)的加載一些html代碼，一般會選擇下面這樣的方式str="親愛的提示條您真的要GG嗎？ "但是感覺這樣太丑了，可讀性和可維護性都很差。有什么更加優(yōu)雅和簡潔的方式嗎？

查看完整描述

2 回答

qq_花開花謝_0

TA貢獻1835條經(jīng)驗獲得超7個贊

把你想要的結(jié)構(gòu)寫在HTML里，用一個display：none的標簽來包裹，一般而言，會使用：不設(shè)置為type="text/javascript"的script標簽textarea標簽如或親愛的提示條

您真的要GG嗎？

使用這些標簽，是為了避免這些不被直接使用的標簽一被瀏覽器讀取到就被渲染。而且這樣做的話，里面的img的src也不會被瀏覽器自動獲取。如果你使用script標簽，就可以如下代碼得到它：//使用script包裹vartemplate=document.getElementById("theTemplate").innerHTML;//使用textarea包裹vartemplate=document.getElementById("theTemplate").value;使用時textarea時要注意，textarea無法嵌套自身；script標簽也無法自嵌套。但如果文檔結(jié)構(gòu)是固定的，里面的數(shù)據(jù)需要動態(tài)填充呢？請參考面向數(shù)據(jù)編程。P.S.對于innerHTML和value的使用可能會造成XSS。動態(tài)添加HTML代碼，前端若由模板導出，在JS里面寫結(jié)構(gòu)，或者在HTML里面寫結(jié)構(gòu)，這個結(jié)構(gòu)對于黑客來說都是白盒的，白盒攻擊相對簡單，黑客可以通過閱讀代碼來看到哪一些代碼可以被利用。比如$用戶簽名$，發(fā)現(xiàn)這里的用戶簽名是用戶可控制的數(shù)據(jù)之后，黑客可以構(gòu)造一個之類的用戶簽名，未經(jīng)過濾<>的話，就可以做到XSS。因此，在面向數(shù)據(jù)編程里講到的方案中，通過json進行動態(tài)匹配替換時，一定要保證后端輸出的數(shù)據(jù)JSON里，<、>等語義敏感的字符正確轉(zhuǎn)義。