javascript - Dynamically assign value to dom -

i have html page show user profile username,place,about etc. getting value using ajax in jquery. have question how assign retrieved value dom:

first method wait till data dynamically create dom , append target div

 $.ajax({      url: "profiledata",      type: "post",      success:function(data){          $("<div><label>"+data.name</label><br/>           <label>"+data.place</label></div>").appendto("target div");      } 

in method more append of string happen doubt memory consumed process.

second method use id assign value:

 $.ajax({      url: "profiledata",      type: "post",      success:function(data){           $("#uname").text(data.name);           $("#place").text(data.place);      }   <div><label id="uname"></label><br/> <label id="place"></label></div> 

which 1 efficient in terms of loading page i.e. lighter code , page did mentioned write approach? or better solution there?

depends on use case, both solutions have advantages , disadvantages.

the first method:

• doesn't load elements until need them
• but has jquery creating element in memory rather modifying elements on page.

the second method:

• isn't creating elements modifying markup little easier aren't looking html in js.
• now have remember hide elements if don't want user see them

which method use, depend on varying factors. generally, prefer second because when want modify markup, not looking in javascript.