Category: JavaScript

To add new li to ul on click with JavaScript, we use the appendChild method.

For instance, we write

<ul id="list">
  <li id="element1">One</li>
  <li id="element2">Two</li>
  <li id="element3">Three</li>
</ul>

to add a ul element.

Then we write

document.body.onclick = () => {
  const ul = document.getElementById("list");
  const li = document.createElement("li");
  li.appendChild(document.createTextNode("Four"));
  ul.appendChild(li);
};

to add a click listener to the body element by setting the document.body.onclick property to a function that gets the ul with getElementById.

And then we create an li element with createElement.

Then we append the li element with a text node created with createTextNode.

And we call ul.appendChild to append the li to the ul.

To add a class to the html element with JavaScript, we call the classList.add method.

For instance, we write

document.documentElement.classList.add("myCssClass");

to get the html element with document.documentElement.

Then we call classList.addto add themyCssClass` to it.

To change label text using JavaScript, we set the innerHTML property.

For instance, we write

<label id="lbltipAddedComment">test</label>

to add a label element.

Then we write

document.getElementById("lbltipAddedComment").innerHTML =
  "your tip has been submitted!";

to select the element with getElementById.

And then we set innerHTML property with the new label text to update it.

To replace words in the body text with JavaScript, we call the replace method.

For instance, we write

document.body.innerHTML = document.body.innerHTML.replace("hello", "hi");

to call document.body.innerHTML.replace with 'hello' and 'hi' to replace 'hello' with 'hi' in the body element.

And then we assign the replaced string back to document.body.innerHTML to update the body element’s contents with the new string.

To insert HTML elements with JavaScript, we call the insertAdjancentHTML method.

For instance, we write

const element = document.getElementById("one");
const newElement = '<div id="two">two</div>';
element.insertAdjacentHTML("afterend", newElement);

to call getElementById to get the element.

Then we call insertAdjacentHTML to insert the element in the newElement string as the element after element with 'afterend'.

To generate HTML with JavaScript, we use Mustache.

For instance, we write

const view = {
  url: "/hello",
  name: () => {
    return "Jo" + "hn";
  },
};

const output = Mustache.render(
  '<div><img src="{{url}}" />{{name}}</div>',
  view
);

to call Mustache.render with the Mustache template and the view object with the values for the url and name placeholders.

To access JSON data loaded in a script tag with src set with JavaScript, we call the JSON.parse method.

For instance, we write

window.myJSON = {
  id: "12ws",
  name: "smith",
};

in my-json.js to add a global variable with the JSON.

Then we write

<script src="my-json.js"></script>
<script>
  document.getElementById("json-holder").innerHTML = JSON.stringify(myJSON);
</script>

to load my-json.js with the script tag.

And then we convert the myJSON variable to a string with JSON.stringify and then set that as the HTML content of the element with ID json-builder.

To convert an HTMLElement to a string with JavaScript, we use the outerHTML property.

For instance, we write

const element = document.getElementById("new-element-1");
const elementHtml = element.outerHTML;

to select the element with getElementById.

And then we get the HTML code for the element as a string with the outerHTML property.

To draw polygons on an HTML5 canvas with JavaScript, we call the moveTo and lineTo methods.

For instance, we write

const ctx = canvas.getContext("2d");
ctx.fillStyle = "#f00";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 50);
ctx.lineTo(50, 100);
ctx.lineTo(0, 90);
ctx.closePath();
ctx.fill();

to get the canvas context with getContext.

And then we call beginPath to start drawing.

We call moveTo to move to the starting point.

Then we call lineTo to draw a line to the next point.

Next, we call closePath to close the path.

And we call fill to apply the fillStyle color as the fill color of the polygon.

To get the width and height of an HTML5 canvas with JavaScript, we use the getBoundingClientRect method.

For instance, we write

const canvas = document.getElementById("mycanvas");
const width = canvas.width;
const height = canvas.height;
const canvasW = canvas.getBoundingClientRect().width;
const canvasH = canvas.getBoundingClientRect().height;

to select the canvas with getElementById.

And then we call getBoundingClientRect method to return an object with the width and height of the canvas.