使用 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 非常轻量级，根据this gist 压缩了 31,8kB）

如果你必须在一两个地方插入 html 并且你关心性能，请检查this article

请记住，在每次迭代中，您都在遍历 DOM 以找到 #features 元素，这是非常低效的。最好在循环外执行查询并将其存储在 const 中，或者如下所示。

另外，这可能是一个错字，但你有一个偷偷摸摸的 h2 标签<div class = 'feature' <h2>。现代浏览器会尝试修复 HTML 错误，但您不应依赖它，因为它们必须进行大量猜测，并且可能会破坏您的布局。

TL;DR

最快的方法是使用香草 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);