Solved

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

Posted on 2016-09-18
4
79 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 58

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 58

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

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

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.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
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 …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

615 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