json data

// json data


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>


<input id="changeText" type="submit" value="changetext" />


<script>

function _(x){return window.document.getElementById(x)}

function chnageText(){
// header
window.document.write('<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>JavaScript</title><link rel="stylesheet" type="text/css" href="style.css"/></head><body><div class="main-layout-area"><div class="article_area"><div class="header">Header</div><div class="content">');

		$.ajax({
		  url:'https://gist.githubusercontent.com/planetoftheweb/2c2f3b03b72a7f2ae923/raw/d0236fd0a945fdac7acd463f268bd20ebe4d766c/data.json',
		  method: 'GET',
		  datatype: "json"
		}).done(function(data){
			//_('article').innerHTML = data;
			var obj = JSON.parse(data);
			//console.log(obj.speakers.length); // length

			for(var i=0;i < obj.speakers.length; i=i+1 ){
			window.document.write('<div id="article'+[i]+'"></div>');

			_("article"+i).innerHTML = '<br/>Name : '+ obj.speakers[i].name + " <br/> Shortname : "+ obj.speakers[i].shortname + " <br/> Reknown : " + obj.speakers[i].reknown + "<br/> Biography : " + obj.speakers[i].bio + '<br/><br/>';
			}

// footer
window.document.write('</div><div class="footer">Footer</div></div></div></body></html>');

		});

}
_('changeText').addEventListener('click',chnageText,false);
</script>