加载ajax内容的快速方法

Question

Lets say i have json which contains informations. What would be the best way to put the informations on site. Creating elements via js like (this is just part im interested in , inside ajax call) var div=document.creteElement("div"); var text=document.createTextNode("bla"); var img=new Img; img.src=json1.img; img.onload=function(){ div.appendChild(text); div.appendChild(img); } or putting them "in" like

body.innerHTML+="<div><p>blabla</p><img src='json1.img'/></div>"`

which one of there is better/faster/more efficient , or is there any better way how to put content into site via ajax? Also how does big sites that load tons of data from server handle this? Tons of data would take a lot of time to load

Answer 1

Ok, I understand now. To render content from ajax you have 3 choices:

1. Load the data with an ajax request ($.ajax in jquery or xmlhttprequest from scratch) and then create elements and insert into DOM. This solution is very bad because it is unmaintainable.
2. Load data using ajax and use javascript templates like Underscore template (_.template) or Handlebars (http://handlebarsjs.com/). This is a very useful solution.
3. Load data using ajax and use a very powerfull system views like React JS. I love it and it's very intuitive and easy to use to have a good performance without a lot of work from your part. "Template system" is very cool and easy (like using html). I will use react if I were you :) https://facebook.github.io/react/