The dom API

Summary of the table
Header1	Header2	Header3
Item	Item	Item
Item	Item	Item

This is the base HTML file:

    
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>DOM Manipulation</title>
    </head>
    <body>
    </body>
</html>

    
const body = document.body;

//Adding elements to the page
//Append also accepts nodes
body.append("Append multiple ", "strings");
//body.appendChild on the other hand only 
//accepts nodes

//To create an element
const div = document.createElement("div");
//To append the element we have just created
body.append(div);

//To add text to our div there are 2 ways:
//just prints the text that is visible
//It won't show an element with style="display:none;"
div.innerText = "Hello World!";
//meanwhile text content mantains the 
//indentation
div.textContent = "Hello World 2!";

//Now let's modify the HTML of a page
//NOT RECOMMENDED FOR SECURITY CONCERNS
div.innerHTML= "<strong>Hello</strong";
//NOT RECOMMENDED FOR SECURITY CONCERNS
//do this instead
const strong = document.createElement("strong");
strong.innerText = "Hello world 2";
div.append(strong);
</script>

    
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div>
        <span id="hi">Hello</span>
        <span id="bye">Bye</span>
    </div>
</body>
</html>


<script>
    const body = document.body;
    const div = document.querySelector("div");
    const spanHi = document.querySelector("#hi");
    const spanBye = document.querySelector("#bye");

    //To remove an element use the .remove() method
    spanBye.remove();
    //You can also remove a child
    div.removeChild(spanHi);
</script>