jquery - Fastest method to create HTML elements? -

consider example code:

function appendtext() {     var txt1="<p>text.</p>";               // create element html       var txt2=$("<p></p>").text("text.");   // create jquery      var txt3=document.createelement("p");  // create dom     txt3.innerhtml="text.";      $("p").append(txt1,txt2,txt3);         // append new elements } 

in above code i've created paragraphs using 3 different techniques. want know 1 faster & more efficient in phonegap?

var txt1="<p>text.</p>";               // create element html  // actually: $('<p>text.</p>'); 

in case, jquery create <div> element, set .innerhtml property html string you've passed. not particularly fast.

var txt2=$("<p></p>").text("text.");   // create jquery 

this faster, because jquery optimized map straight createelement() , you're using .text() no additional parsing required.

var txt3=document.createelement("p");  // create dom txt3.innerhtml="text."; 

this sidesteps parts of 2 approaches , should faster, isn't because you're using .innerhtml has parsed first.

the fastest this:

var txt4 = document.createelement('p'); txt4.textcontent = 'text.'; 

proof

note when fast, it's based on results of particular test case; wouldn't point matter. also, native version faster separate test have done more accurate results other test cases :)