HTML JS

DYNAMIC HTML CONTENT WITH JAVASCRIPT

<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 IN SECOND TO LOAD FIRST 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 list = "<ul>";   for (let r of data)   { list += `<li>${r.name} - ${r.age}</li>`; }   list += "</ul>";   document.getElementById("ID")   .innerHTML = list; });

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);