function manipulate_01() {
    // DOM Maniplulation_01:
    // In this code we will create an element i.e., a
    // new div and give it some content and insert the
    // new div in a specific place in the DOM and also
    // change the heading text from DOM Changes to
    // DOM Manipulation and display it to the web page
    var btn01 = document.getElementById("btn01");
    // create a new div element
    var newDiv = document.createElement("div");
    // and add some content to to the div (translation is "Long life to all")
    var newContent = document.createTextNode("Kia ora koutou katoa!");
    // add the text node to the newly created div
    newDiv.appendChild(newContent);

    // add the newly created element and its content into the DOM before <div id="div1">
    var currentDiv = document.getElementById("div1");
    document.querySelector(role = "main").insertBefore(newDiv, currentDiv);

    // change heading from "DOM Changes!" to "DOM Manipulation!"
    var myHeading = document.getElementById("dom-manipulate");
    myHeading.textContent = "DOM Manipulation!";
    btn01.classList.add("hide-btn");
}