Append html code with variables using jquery / javascript

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

Is there a particular reason to not use Django's own templating language? If the data to insert comes from a client-side request, then you have to use JS, but if your data comes directly from the server, you'll find that django's templating language is very clear and easy to use. Documentation here — subparry
– subparry, Commented Nov 17, 2020 at 3:23
yes, the data is coming from client side only - hence not using Django template — Aditya Ganguli
– Aditya Ganguli, Commented Nov 17, 2020 at 4:26

subparry · Accepted Answer · 2020-11-17 13:37:39Z

2

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

answered Nov 17, 2020 at 13:37

subparry

3532 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Aditya Ganguli Over a year ago

Thanks for detailed reply. I am adding only a few divs so not concerned about the efficiency, however the html code was for illustration.Its a much larger html and key concern is readability. Hence was wondering if inline templating is an option

subparry Over a year ago

Yes, it is always an option. But if you are concerned about readability (and maintanibility) you should consider adding your JS as a static asset in your django template and place your javascript there. Did I understand correctly?

hansfpc Over a year ago

gorgeous! just what i needed

Collectives™ on Stack Overflow

Append html code with variables using jquery / javascript

1 Answer 1

TL;DR

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

TL;DR

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related