Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Best way to add DOM elements with jQuery

So I've seen three ways to add html/DOM elements to a page. I'm curious what the pros and cons are for each of them.

1 - Traditional JavaScript

I believe the straight JS way to do it is by constructing each element, setting attributes, and then appending them. Example:

var myRow = document.createElement("tr"); myRow.class = "myClass";  var firstTD = document.createElement("td"); firstTD.innerHTML = "first"; myRow.appendChild(firstTD);  var secondTD = document.createElement("td"); secondTD.innerHTML = "second"; myRow.appendChild(secondTD);  document.getElementById("myContainer").appendChild(myRow); 

2 - Appending a string of html via jQuery

I've noticed that most jQuery examples I see usually just append a string of html.
Example:

$("#myContainer").append('<tr class="myClass"><td>first</td><td>second</td></tr>'); 

3 - jQuery's .clone()

I've also seen a lot of uses and references to .clone() in jQuery.
Example:

$("#myContainer").append($(".myClass").clone()); 

I'd love to hear what others have to say about this.

(Also, this seems like a good candidate for a 'community wiki', but I'm not too familiar with them. Will someone comment and let me know if it should be? Thanks)

like image 237
sdr Avatar asked Feb 04 '10 18:02

sdr


People also ask

How do I add elements to a DOM?

To add a new element to the HTML DOM, you must create the element (element node) first, and then append it to an existing element.

Which is better DOM or jQuery?

Pure JavaScript can be faster for DOM selection/manipulation than jQuery as JavaScript is directly processed by the browser. jQuery has to be converted into JavaScript to make it run in a browser. All these can be done in JavaScript but we may have to write many lines of code.


2 Answers

If you are using jQuery 1.4 the best way is the following:

$("<a/>", {     id: 'example-link',     href: 'http://www.example.com/',     text: 'Example Page' }).appendTo("body"); 
like image 60
sp. Avatar answered Sep 27 '22 20:09

sp.


If you already have a template element that you want to copy then by all means use clone().

But if you want to create an element from scratch then there's basically two methods which I think you alluded to:

  1. Create DOM elements as objects (using createElement for example).
  2. Create DOM elements as HTML (using innerHTML or jQuery's html() for example).

First if either of the methods is more intuitive or easier to write for you, I'd recommend just doing that.

Otherwise benefits of using the latter is that it is cleaner if the element has many children. For example, try to make a table row with 6 columns, each with a different class using the first method. Your code will be much longer than if you used the second method.

As far as performance goes this is a good guide http://andrew.hedges.name/experiments/innerhtml/ but the short answer is for most cases the differences are quite negligible. A good guide for performance in general as well is: http://www.artzstudio.com/2009/04/jquery-performance-rules/. The 6th tip has to do with DOM manipulation.

like image 40
jhchen Avatar answered Sep 27 '22 20:09

jhchen