HTML JS
<p id="first">FOO</p> <p id="second">BAR</p>
01
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>
02
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 IN SECOND TO LOAD FIRST fetch("FIRST.HTML").then(res=>res.text()) .then((txt) => { document.getElementById("demo") .innerHTML = txt; })
03
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 list = "<ul>"; for (let r of data) { list += `<li>${r.name} - ${r.age}</li>`; } list += "</ul>"; document.getElementById("ID") .innerHTML = list; });
04
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);
05