JQuery for dynamically creating complex HTML snippets

I want to generate (or at least fill a template with JSON data and add to the list) a semi-component HTML div using jQuery. The data is in JSON format (if that matters), and for each parent record I want to add another div element to the carousel element.

Long statement, for example:

$('#list').append('<li><div id=" + entry.id +"><span id="highlight> + entry.name + <span/><div id="picture" ....

will work, but it’s too hard to maintain (sorry, the errors are there just to make a point). There should be a more efficient way.

Thank.

+5
source share
3 answers

You are learning javascript template languages ​​- there are tons:

, :

var myUser = { name : 'John', lastname : 'Doe' };

$('#awesomeDiv').html(
    someTemplateFunction( { user : myUser } )
);

someTemplateFunction() - :

<p>Hello <strong><%=user.name %> <%=user.lastname %></strong></p>

, , [ DOM ] DOM.

underscore.js, , , .

+6

, , , , "" js html, . , html , , , div.

0

All Articles