使用 jquery/javascript 附加帶有變量的 html 代碼

Question

我無法在 django 中呈現的 html 模板中從 jqavascript/jquery 生成 html 代碼。 我必須附加 html 代碼並在它們之間插入一些值。 現在我正在做這樣一個粗略的字符串追加

var features =['a','b']
for (var i=0;i<features.length;i++){
    var html_code = "<div class = 'feature' <h2>"+features[i]+"</div>
    $("#features").append(html_code)
}

對於 html 代碼

<div id="features"></div>

什么是正確和最干凈的方法來做到這一點。 我知道模板是要走的路，但似乎有很多不同的方法 - 內聯 javascript，像 mustache、handlebar 這樣的外部庫，使用 django 自己的模板解決方案 - 這非常令人困惑

Answer 1

為此，您確實有多種選擇。 我會根據您需要更改網站中的 DOM 多少次來做出決定。 如果經常使用，我會考慮使用一個庫來使其更具可讀性/可維護性（React + ReactDOM 非常輕量級，根據這個gist 壓縮了 31,8kB）

如果您必須在一兩個地方插入 html 並且您關心性能，請查看這篇文章

請記住，在每次迭代中，您都在遍歷 DOM 以查找#features元素，這是非常低效的。 最好在循環外執行查詢並將其存儲在常量中，或者像下面所示那樣執行。

此外，這可能是一個錯字，但是您在<div class = 'feature' <h2>有一個偷偷摸摸的 h2 標簽。 現代瀏覽器嘗試修復 HTML 錯誤，但您不應該依賴它，因為它們必須進行大量猜測並且可能會破壞您的布局。

TL; 博士

最快的方法是使用 vanilla JS：

const features = ['a', 'b']
const c = document.createDocumentFragment();
for (let i=0; i<features.length; i++) {
    const e = document.createElement("div");
    const textNode = document.createTextNode(features[i]);
    e.appendChild(textNode);
    e.className = "feature";
    c.appendChild(e);
}
document.querySelector('#features').appendChild(c);