HTML JS
(quick guide & examples)
<p id="first">FOO</p> <p id="second">BAR</p>
WILL STILL BE A <P>, BUT INNER CONTENT CHANGED document.getElementById("first") .innerHTML = "<u>HELLO</u>";
WILL CHANGE THE ENTIRE ELEMENT TO A <DIV> document.getElementById("second") .outerHTML = "<div>HELLO</div>";
<p id="demo">FOO</p>
CREATE NEW ELEMENT var el = document.createElement("u"); el.innerHTML = "HELLO";
APPEND document.getElementById("demo") .appendChild(el);
FIRST FILE <p>FOO</p> SECOND FILE <p id="demo"></p>
USE AJAX FETCH IN "SECOND FILE" TO LOAD "FIRST FILE" fetch("FIRST.HTML") .then(res => res.text()) .then(txt => document.getElementById ("demo").innerHTML = txt);
DUMMY JSON DATA ON SERVER [{"name":"Jon,"age":"9"}, {"name":"Joy,"age":"8"}]
AJAX LOAD DATA, CREATE LIST fetch("URL").then(res => res.json()) .then(data => { var ul= "<ul>"; for (let r of data) { ul += `<li>${r.name} - ${r.age}</li>`; } ul += "</ul>"; document.getElementById("ID") .innerHTML = ul; });
THE CSS FILE html, body { font-family: arial, sans-serif; padding: 0; margin: 0; }
JAVASCRIPT LOAD CSS var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; link.href = "STYLE.CSS"; document.head.appendChild(link);