如何在 JS 中嵌入 HTML 代碼？

---

答案是不要這麼搞，大段的 HTML 嵌入到 JS 里結果就是悲劇。不能代碼高亮不能自動縮進，太難維護了。

我的經驗是，直接把 HTML 單獨寫到一個瀏覽器能訪問到的文件里，比如 template/foo.html。然後 JS 里發一個同步 XHR 請求去讀這個文件，例如：

var html = Template.load("/template/foo.html");

var target = document.getElementById("xxx");

target.innerHTML = html;

Template 是一個工具類，負責發送同步 XHR 請求並返回結果。

這樣在開發的時候，模板文件和 JS 代碼分離，非常好維護。

當然這樣做的話，上線的時候總發 XHR 請求也不是辦法。所以在打包 JS 之前，我一般會通過腳本把所有的 Template.load(".*") 提取出來，替換成對應 HTML 的內容。這樣在開發時非常方便，上線時也沒有性能問題。

比如上面的代碼被打包工具跑一下就變成了：

var html = "& &

...& &"; // 引號里是 /template/foo.html 對引號、換行做了轉義之後的內容，由工具自動生成

var target = document.getElementById("xxx");

target.innerHTML = html;

---

常規方法未必見得多麻煩

var longString = "
------------------------
------------------------
...
------------------------
";


+

var longString = "------------------------" +
"------------------------" +
...
"------------------------";


String.concat

"".concat(
"-----------------------------",
"-----------------------------",
...
"-----------------------------",
);


Array.join

[
"-----------------------------",
"-----------------------------",
...
"-----------------------------",

].join("");


---

比較複雜的用模版，比如 Closure 裡面的 Soy 模版，直接編譯一個文件就可以使用，一般簡單的可以使用 Dom 函數構造出來：

var d = goog.dom.createDom;
var html_ = d("div", "some_class",
d("ul", "list_item", [
d("li", null, "item 1"),
d("li", null, "item 2"),
d("li", null, "item 3")
])
);


---

如果用 SeaJS 的話，可以通過 text 插件引入外部的 HTML 文件，代碼編寫方式是同步的

文本插件 · Issue #265 · seajs/seajs · GitHub

---

和@pw 的類似， 也可以用 jQuery Template

見： http://api.jquery.com/jquery.tmpl/

---

推薦一個在"豆瓣說"代碼裡面看到的方法，感覺挺實用的。

&

---

將一段html代碼如何易維護在js中實現動態添加

將html代碼寫成一個模板，例如這樣子一個片段&#link_name&，通過js動態添加，js中通過正則替換#href,#title,#link_name

---

可以將需要的 html 放到頁面隱藏的 textarea 中，然後該怎麼做就怎麼做吧。

---

ps：最好寫個方法，低版本id用數組拼，其他現代瀏覽器用+號直接串起來。

不過好像跟lz問的問題有所出入。

lz問的應該是怎麼在js里寫大段的html。

參考資料：

http://yiding-he.iteye.com/blog/58180

http://biancheng.dnbcw.info/javascript/182283.html

---

1:jquery:
$("&",{
id:xx,
class:xx,
name:xx
}).append($(&,{
id:xx,
name:xx,
class:xx
}));

2:ajax XHR
//方法就是一個同步請求
//ps: TODO 有時候一定要進行 延遲調用

3:自定義formatString函數 拼接複雜字元串 //強烈不推薦 直接拼接複雜字元串 會造成一些不易查找的錯誤

// ps: 話外之音 4: 你做網頁肯定會用到asp jsp python這類後台語言吧 你可以直接使用 例如:jsp的 include python模板中的 extend 直接把頁面引入唄

5:&


---

利用注釋咯

var html = function(){

/*

&&

*/

}

除了低版本的firefox，其他瀏覽器都可以直接通過html變數拿到函數的字面量

之後用正則匹配出注釋內容即可。

你可以把這塊封裝為一個函數，類似這樣

function template (tmpl) {

var regEx = new RegExp("/\*([\S\s]*)\*/", "mg");

tmpl = tmpl + "";

var matches = tmpl.match(regEx) || [];

var result = [];

for (var i = 0; i &< matches.length; i++) {

result.push(matches[i].replace(regEx, "$1"));

}

return result.join("");

};

然後

var html = template(function(){

/*

&&

*/

})

註：在某些低版本firefox下獲取函數字面量時會過濾注釋。如果你的代碼需要被一些工具編譯，同樣有可能被過濾注釋。

---

用 ES6 的模板字元串，要兼容就 Babel 轉一下:

var html = `&
&

時間： ${ new Date() }& &
&`;


---

var html = (function () {/*
&
&
&
&Hello, world!& &
&
*/}).toString().match(/[^]*/*([^]*)*/}$/)[1];


---

用字元串和數組當然是可以的。如果想追求性能的話，就用 DOM 吧，`createElement()` 之類的 DOM 方法

---

var tagBox = "&
& &為選中圖片增加標籤& "+ tagPicList + "
& &"

題主說得是這個意思不?


---

建議使用模版引擎，優點是代碼看著乾淨，缺點是不能處理複雜的內部邏輯關係

如：

var tpl = "&&<%= myPage %&>&";

var html = _.template(tpl, {
myPage : "模版引擎"
});


---

如果用 django 就比較好辦。把要的靜態或動態的html編輯成一個模版文件（好維護），然後如果是動態的就用

render_to_string("frontend/scroll.html", {"dishes": dishes})


這種方式把模版動態地渲染出來，把結果作為字元串（內容是html）返回給前端ajax，前端js可以把這段放在該放的位置上。

具體請看 http://stackoverflow.com/questions/18976302/returning-rendered-html-via-ajax 的回答

---

requirejs裡面的text插件

---

document.wrtl

---

&醬油黨&

---

前端模板引擎

---

document.write("&

Hello Word！&")

---

推薦閱讀：