使用 jquery/javascript 附加带有变量的 html 代码

Question

I am having trouble generating html code from jqavascript/jquery in a html template rendered in django. I have to append html code and also insert some values in between. Right now I am doing a crude string append like this

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)
}

For html code

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

What is the right and cleanest way to do this. I know templating is the way to go but there seem to be so many different ways - inline javascript, external library like mustache,handlebar, using django's own template solution - it's very confusing

Answer 1

You have indeed a wide range of options for this. I'd make the decision based on how many times do you need to change the DOM in your website. If it is very often, I'd think about using a library to make it more readable/maintainable (React + ReactDOM is very lightweight, 31,8kB gzipped according to this gist )

If you have to insert the html in one or two places and you care about performance, check this article

Keep in mind that in each iteration you are traversing the DOM to find the #features element and that's very inefficient. It'd be better to perform the query outside the loop and store it in a const, or do it like shown below.

Also, it might be a typo, but you have a sneaky h2 tag there <div class = 'feature' <h2> . Modern browsers try to fix HTML errors but you should not rely on it because they have to do a lot of guesswork and it might break your layout.

TL;DR

Fastest way is with 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);