javascript - Best way to add DOM elements with jQuery

Question

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 1

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