Best way to create dynamic content using javascript?

Question

Does it matter if I create the element and set the element attributes programmatically, as in fragment 1 of the verse, writing out innerHTML, as in fragment 2? How about using a template library as suggested in one of the answers?

fragment 1

var link_element, image_element; // create image element image_element = $A.createElement('img'); image_element.className = "bookmark_image"; image_element.name = "bo_im"; image_element.src = bookmark_object.favicon; // create link element link_element = $A.createElement('a'); link_element.innerHTML = bookmark_object.title; link_element.href = bookmark_object.url; link_element.name = "bookmark_link"; link_element.className = "bookmark_link"; link_element.target = "_blank"; // append now 

fragment 2

 '<img name="bo_im class="bookmark_image" src="' + val.favicon + '">' + '<a target="_blank" name="bookmark_link" class="bookmark_link" href = "' + val.url + '" id="' + val.id + '">' + val.title + '</a>' + // set to innerHTML now 

Answer 1

A very good solution (IMO) for this problem is to use some kind of template library. One popular option would be Mustache , which has libraries for many languages including JavaScript .

The template approach consists of writing your HTML with placeholders in, for example, the <script> :

 <!-- very simple example --> <script id="bookmark-template" type="text/html"> <img name="bo_im" class="bookmark_image" src="{{favicon}}"> <a target="_blank" name="bookmark_link" class="bookmark_link" href="{{url}}" id="{{id}}"> {{title}} </a> </script> 

Then, when it comes time to render dynamic content, you use a template and provide data to populate it as follows:

 var template = document.getElementById("bookmark-template").textContent; var html = Mustache.render(template, bookmark_object); 

To illustrate this more clearly, here is a jsFiddle demonstrating this approach (including the advantage of escaping).

There are at least a few advantages to this:

• Using the template allows you to write HTML files with indentation, formatting, etc., to make it as readable as possible, and not just "almost just copy it," as you say in your question. You do not need to write one large line or concatenate a bunch of lines with + or even use + .
• A good template library will correctly delete your HTML for you.

For me, these advantages are enough. You may feel different.

Answer 2

fragment 2 discards any dynamically added events, see jsFiddle code:

 <div id="source"> <div>item with click event</div> </div> <div id="target"> </div> <script> var source = document.getElementById("source"); var target = document.getElementById("target"); source.children[0].onclick = alert.bind(null,"test"); target.innerHTML = source.innerHTML; // onclick event is not copied </script> 

If you do not use dynamic events for created elements, stay with snippet 1 : because of the function mentioned above, it seems to be faster .