Tiny DOM

innerHTML and a click counter.

This playground can write document.body.innerHTML. Log clicks too.

Goal

Show a Nairobi heading and count clicks in the console.

document.body.innerHTML = "<h1>Nairobi kiosk</h1>";
console.log(document.querySelector("h1").textContent);
document.body.innerHTML = '<p id="out">ready</p><button id="btn">Sell</button>';
let n = 0;
document.getElementById("btn").onclick = () => {
  n += 1;
  document.getElementById("out").textContent = "units " + n;
  console.log("units", n);
};
console.log("click Sell");
document.body.innerHTML = "<ul id=\"list\"></ul>";
for (const city of ["Nairobi", "Mombasa"]) {
  const li = document.createElement("li");
  li.textContent = city;
  document.getElementById("list").append(li);
}
console.log(document.querySelectorAll("li").length);
console.log(typeof document.body.innerHTML);