Week 04

Adding Element(s) to DOM

Sometimes, instead of just modifying existing elements, you may need to create and add new elements to the page dynamically. JavaScript provides several ways to do this.

Using innerHTML Property

Every DOM element has an innerHTML property that represents its child elements as a string. You can use this property to get or modify the content inside an element.

⚠ Setting innerHTML replaces all existing child elements, so be careful when using it to avoid losing important content!

Example: Assuming we have a <div> element in our HTML code:

<div></div>

We can add a paragraph to it using the following JavaScript code:

const divElement = document.querySelector("div") // first get the element
divElement.innerHTML = "<p>Hello, World!</p>"

After running the above code, using your Developer Tools, you'll see the following DOM:

<div>
    <p>Hello, World!</p>
</div>

Modifying the DOM with JavaScript doesn’t change the original HTML source code. Instead, it updates the live representation of the page in the browser. These changes are visible in Developer Tools but don’t affect the actual HTML file.

innerHTML Gives/Takes Strings

The innerHTML property works with strings, so to add HTML, you need to format your code as a string. If you're adding plain text (without any HTML tags), it's safer to use the innerText property.

Using Element Methods

Using the innerHTML property has some limitations. Setting it to a new value replaces the element’s children or descendants. Additionally, since it accepts any string, there's a security risk that malicious code could be injected into the DOM.

The Element object also provides various methods for safely adding content to the DOM. Here are a few:

append()

The append() method allows us to add one or more Nodes to an Element (just a quick note: an Element is a type of Node).

Since append() accepts Nodes, we can’t use HTML in string format directly (though there are exceptions). To add HTML content, we first need to create a Node, and the easiest way to do this is by using document.createElement(). Remember, all Elements are Nodes.

Example: Assuming we have a <div> element in our HTML code:

<div></div>

Here's how to add a paragraph as the last child of the <div>:

const divElement = document.querySelector("div") // first get the element
const pElement = document.createElement("p") // create a p Node/Element
pElement.innerText = "Hello, World!"

divElement.append(pElement) // add the p Node to the div Node

prepend()

With append(), we add one or more Nodes as the last child of an Element. Similarly, prepend() lets us add one or more Nodes as the first child of an Element. The only difference is the position where the Nodes are added.

Example: Assuming we have a <div> element in our HTML code:

<div>
    <p>First paragraph</p>
</div>

Here's how to add a paragraph as the first child of the <div>:

const divElement = document.querySelector("div") // first get the element
const pElement = document.createElement("p") // create a p Node/Element
pElement.innerText = "Very First Paragraph"

divElement.prepend(pElement) // add the p Node as the first child of the div

before()

To add one or more Nodes just before an Element, use the before() method. It works the same way as append() and prepend(), but places the Nodes before the target Element.

Example: Assuming we have the following HTML:

<div>
    <p>First paragraph</p>
    <p>Last paragraph</p>
</div>

Here's how to add a middle paragraph with JavaScript:

const lastPElement = document.querySelector("p:last-child") // first get the last p element
const pElement = document.createElement("p") // create a p Node/Element
pElement.innerText = "Middle Paragraph"

lastPElement.before(pElement) // add the p Node before the last p Node 

after()

The after() method works like before(), but it adds Nodes after an Element instead of before.

Example: Assuming we have the following HTML:

<div>
    <p>First paragraph</p>
    <p>Last paragraph</p>
</div>

Here's how to add a middle paragraph with JavaScript:

const firstPElement = document.querySelector("p:first-child") // first get the first p element
const pElement = document.createElement("p") // create a p Node/Element
pElement.innerText = "Middle Paragraph"

firstPElement.after(pElement) // add the p Node after the first p Node