JSFiddle - React, Tailwind, and code Playground
by Mohd Zaki
HTML
<h1>Single Data</h1>
<div id="placeholder-JQUERY"></div>
<div id="placeholder-DOM"></div>
<h1>More data</h1>
<div id="placeholder-Jq"></div>
<div id="placeholder-Dm"></div>JavaScript
/*Single Data*/
var data1 = {"namaPenuh": "Mohamad Safwan Haziq"};
//JQUERY
$("#placeholder-JQUERY").append("JQUERY : " + data1.namaPenuh);
//DOM
document.getElementById("placeholder-DOM").innerHTML = "DOM : " + data1.namaPenuh;
var data2 = {
"namaPenuh": "Mohamad Safwan Haziq",
"jawatan": "Pembantu Tadbir",
"gred": "N17",
"noTelefon": "03-8888 0000",
"sambungan": 123
};
/*More data*/
//JQUERY
$("#placeholder-Jq").append(
"<p>JQUERY</p>" +
"<ul>" +
"<li>" + data2.namaPenuh + "</li>" +
"<li>" + data2.jawatan + "</li>" +
"<li>" + data2.gred + "</li>" +
"<li>" + data2.noTelefon + "</li>" +
"<li>" + data2.sambungan + "</li>" +
"</ul>");
//DOM
document.getElementById("placeholder-Dm").innerHTML =
"<p>DOM</p>" +
"<ul>" +
"<li>" + data2.namaPenuh + "</li>" +
"<li>" + data2.jawatan + "</li>" +
"<li>" + data2.gred + "</li>" +
"<li>" + data2.noTelefon + "</li>" +
"<li>" + data2.sambungan + "</li>" +
"</ul>";