HTML JS

DYNAMIC HTML CONTENT WITH JAVASCRIPT

(quick guide & examples)

<p id="first">FOO</p> <p id="second">BAR</p>

INNER & OUTER HTML

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>

CREATE & APPEND ELEMENTS

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 FETCH IN "SECOND FILE" TO LOAD "FIRST FILE" fetch("FIRST.HTML") .then(res => res.text()) .then(txt => document.getElementById ("demo").innerHTML = txt);

AJAX LOAD CONTENT

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

GENERATE LIST WITH AJAX DATA

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

DYNAMIC LOAD CSS

05