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)

Answer

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");

Advertisement

Answer