Solved

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

Posted on 2016-09-18
4
73 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 55

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 55

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

809 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