Solved

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

Posted on 2016-09-18
4
75 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 56

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 56

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

733 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