Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2016-09-18
4
Medium Priority
?
82 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 60

Assisted Solution

by:Julian Hansen
Julian Hansen earned 1600 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 83

Assisted Solution

by:leakim971
leakim971 earned 400 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 60

Accepted Solution

by:
Julian Hansen earned 1600 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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
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…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

824 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