How do I dynamically populate html elements with JSON Data with Javascript not jQuery?

Loop through them and use the DOM functions.

Loop through them and use the DOM functions: var news = document. GetElementsByClassName("news-story")0; var items = json. Items; for(var I = 0; I CreateElement("h5"); h5.

InnerHTML = itemsi. Title; news. AppendChild(h5); var p = document.

CreateElement("p"); p. InnerHTML = itemsi. Author; news.

AppendChild(p); } http://jsfiddle.net/AWRAW/ getElementsByClassName will not work in versions of IE prior to 9. If you need to support those though, you're really better off using jQuery.

1 For backwards compatability w/o jQuery , he could choose to add an ID attribute and getElementById() instead. – P.Brian. Mackey Nov 29 '11 at 17:28.

Var div = document. GetElementsByClassName('news-story')0, h5 = div. GetElementsByTagName('h5'), p = div.

GetElementsByTagName('p'), data = JSON. Parse( my_JSON_data ); data.items. ForEach(function(v,i) { h5i.

InnerHTML = v. Title; pi. InnerHTML = "By: " + v.

Author; }); JSFIDDLE DEMO If you need to support older browsers, you can use a typical for statement instead of the forEach method. For( var I = 0; I ' + v. Title + '' + 'By: ' + v.

Author + ''; }). Join(''); div. InnerHTML = html; JSFIDDLE DEMO @Xeon06 shows how in his answer using createElement(), which is arguably a better approach.

Here's how I'd do it: var div = document. GetElementsByClassName('news-story')0, frag = document. CreateDocumentFragment(), data = JSON.

Parse( my_JSON_data ); data.items. ForEach(function(v,i) { frag. AppendChild( document.

CreateElement('h5') ). InnerHTML = v. Title; frag.

AppendChild( document. CreateElement('p') ). InnerHTML = "By: " + v.

Author; }); div. AppendChild( frag ); JSFIDDLE DEMO And of course you can modify it to use a for statement instead: var div = document. GetElementsByClassName('news-story')0, frag = document.

CreateDocumentFragment(), data = JSON. Parse( my_JSON_data ); for( var I = 0; I AppendChild( document. CreateElement('h5') ).

InnerHTML = v. Title; frag. AppendChild( document.

CreateElement('p') ). InnerHTML = "By: " + v. Author; } div.

AppendChild( frag ); The benefit of using a documentFragment is that you can do a single append to the DOM via the fragment instead of multiple appends. This gives better performance, especially if you have a large set of data.

Note that sadly, forEach isn't available on.

I've found that the most reliable way to create DOM elements is using the element. InnerHTML property. Basically you'd have a DIV or SPAN at the place at the place on the page where you want to render the new HTML.

Then you'd grab that span in javascripting using document. GetElementById("DIV-ID") and then set the innerHTML property of the DIV to the new HTML that you would generate from the JSON object. There are a bunch of other JavaScript functions to create elements, but I've found that they're not always reliable and don't always have the best cross-browser support.

http://www.w3schools.com/jsref/prop_html_innerhtml.asp.

Sample with no jQuery: test sample 1 By: author 1 sample 2 By: author 2.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.