JSFiddle - React, Tailwind, and code Playground

by abhitalks

HTML

<div id='mydiv-1'></div>
<hr>
<div id='mydiv-2'></div>

<script type='text/template' id='tmpl'>
	<div><h3></h3><p></p><h5></h5></div>
</script>

JavaScript

var json1 = JSON.stringify({'elem': 'b', 'text': 'bold', 'value': '42'}), 
	json2 = JSON.stringify({'title': 'title', 'text': 'paragraph', 'value': '42'})
;
function doit(param) { return param.toString(); }

$.ajax({ 
	url: "/echo/json/",
    method: "POST",
    data: {"json": json1 },
    datatype: "json",
    success: function(response) { 
		var elem = document.createElement(response.elem);
		elem.textContent = response.text + doit(response.value);
		$('#mydiv-1')[0].appendChild(elem);
    }
});

$.ajax({ 
	url: "/echo/json/",
    method: "POST",
    data: {"json": json2 },
    datatype: "json",
    success: function(response) { 
		var template = $('#tmpl').html(), 
			$elem = $(template);
		$('#mydiv-2').append($elem);
		$elem.find('h3').text(response.title);
		$elem.find('p').text(response.text);
		$elem.find('h5').text(doit(response.value));
    }
});