how to use html script template correctly

Question

I have to generate some li element automatically and the way I was doing it it through a function that return text inside a loop, something like this:

function getLi(data) {
   return '<li>' + data + '</li>';
}

then I found a better way to do it by writing html inside a div:

<div style="display:none;" id="Template">
   <li id="value"></li>
</div>

and then I would change the id and value get the html and reset the element to original state:

var element = $("#value");
element.html(data);
element.attr('id', getNewId());
var htmlText = $("#Template").html();
element.html('');
element.attr('id', 'value');
return htmlText;

then I was reading on script template

and I figured this could be a better way of doing it,
However apply the previous code didn't work as the inner elements didn't exist according to this article

so how can I apply this?

EDIT: I put inside a ul tag, I use this method to get the items dynamically

EDIT2:

<li>
   <a href="#" >
   <span>
   <span>
some text
   </span>
   </span>
</li>

this isn't necessarily what I have but something along the way

Edit3: my ul does not exist orgialy it's generated dynamically I insist this is not a duplicate I want to know how to use a template with some dynamic variables

Answer 1

You could do the following way. It's clean, reusable and readable.

//A function that would return an item object
function buildItem(content, id) {

    return $("<li/>", {
        id: id,
        html: content
    });
}

In your loop, you could do the following. Do not append each LI inside the loop as DOM manipulation is costly. Hence, generate each item and stack up an object like below.

var $items = $();
// loop begin
var contents = ['<a href="#"><span><span>', data, '</span></span></a>'].join('');
var $item = buildItem(contents, getNewId());
$items.add($item);
// loop end

Just outside the loop. append those generated LIs to the desired UL, like below.

$("ul").append($items);

This is what I'd do and I am sure there are many better ways. Hope that helps.

Answer 2

One option is to upgrade to a modern JavaScript framework like AngularJS and then you could do it in one line using ng-repeat.

This would serve your purpose and make you more money as a developer.

Answer 3

If you're going to repeat this, use a templating system. Like {{ mustache }} or Handlebars.js.

If not, you can do this.

<ul>
  <li class="hidden"></li>
</ul>

And in Javascript

$('ul .hidden').clone().removeClass('hidden').appendTo('ul');

And CSS, of course

.hidden { display:none }

Answer 4

Try this...

function getLi(data,ID) {
   return $('<li id = "'+ ID + '">' + data + '</li>');
}

It returns javascript objest of Li..and you append it where ever you need.

Answer 5

what you need is using jquery templates, in the bellow link you can use good one which I'm using. you create your template and prepare you JASON object of data. after that every thing will be ready in one function call, more details in this link.

---

jquery.tmpl

---

hope this helps you and any one come to here in future..