Solved

Which is better to create html using .html or append a node

Posted on 2016-09-18
4
66 Views
Last Modified: 2016-09-27
HI,
There is the following code in my javascript :
  listHtml += '<li class="clickable autocomplet selected" data-id="' + matched.JID + '"><img src="' + matchedGroups.ImageURL + '">' + encode(matched.Display) + '</li>';
$(".form-menu").html(listHtml);

Open in new window

Other way i can think of is  :
doing something like :
var li = $('<li/>',{class: 'clickable autocomplet selected', data-id: matched.JID));.....
And then do $('.form-menu').empty(); $('.form-menu').append(li);

Both ways do the same thing. I want to know which one is better any why.
Although it looks like in the second approach i am passing it the already constructed Object. Dont know if that will be faster ?

Thanks
0
Comment
Question by:Rohit Bajaj
  • 2
4 Comments
 
LVL 52

Assisted Solution

by:Julian Hansen
Julian Hansen earned 400 total points
ID: 41803886
You can use both.
There are advantages either way. I personally prefer to use the append method - I like the feel that I am coding. For large bits of HTML I use a template either hidden on the page or loaded by AJAX - but it is different for each application.


Short answer it depends on the situation.
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 100 total points
ID: 41804017
you MUST reduce access to DOM to provide the better user experience and save the planet.
#superman

so IMHO I would go to :
$(".form-menu").html(listHtml);

because it use less CPU and memory and are faster
0
 

Author Comment

by:Rohit Bajaj
ID: 41804249
can u please suggest how do i use templates here....
will i nees to include any library for that ?
0
 
LVL 52

Accepted Solution

by:
Julian Hansen earned 400 total points
ID: 41804431
Dynamically add new rows to a table based on a hidden template
<button class="btn btn-default" id="AddPerson">Add Person</button>
<table class="table">
  <thead>
    <tr>
        <th>Name</th>
        <th>Surname</th>
        <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr id="template" style="display: none">
         <td><input type="text" name="name[]" /></td>
         <td><input type="text" name="surname[]" /></td>
         <td><input type="text" name="age[]" /></td>
    </tr>
  </tbody>
</table>

Open in new window

<script>
var row = 1;
$(function() {
  $('#AddPerson').click(function(e) {
    e.preventDefault();
    var template = $('#template')
      .clone()                        // CLONE THE TEMPLATE
      .attr('id', 'row' + (row++))    // MAKE THE ID UNIQUE
      .appendTo($('#myTable tbody'))  // APPEND TO THE TABLE
      .show();                        // SHOW IT
  });
});
</script>

Open in new window

Working sample here
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now