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)