Day 16: Learning JavaScript DOM Manipulation — Create, Change & Delete Elements

On the sixteenth day of my web development learning journey, I delved into the intricacies of JavaScript DOM manipulation. This technique allows me to dynamically create, modify, and delete HTML elements directly within a webpage.

First, I discovered the `document.getElementById()` method, which enables me to select an HTML element based on its unique ID. For instance, `let heading = document.getElementById('title');` allows me to target an element labeled 'title'.

Next, I learned about `document.createElement()`, a powerful tool for generating new HTML elements on-the-fly. Using this method, I created a new paragraph element with `let newElement = document.createElement('p');`. I then populated this new element with content, assigning it the text "Hello JavaScript!" via the `.textContent` property.

To integrate the newly created element into the webpage, I employed the `appendChild()` method. By executing `document.body.appendChild(newElement);`, I appended the fresh paragraph to the body of the document, making it visible to users.

Modifying existing elements was another key focus. To change the text content of an element, I utilized the same `getElementById()` technique, followed by assigning a new string to the `.textContent` property. For example, `document.getElementById('title').textContent = 'Welcome!';` transformed the heading text from "title" to "Welcome!".

Changing images dynamically was also demonstrated. By targeting an `img` element with `document.getElementById('myImage')`, I could modify its `src` attribute, loading a different image. In this case, `document.getElementById('myImage').src = 'new-image.jpg';` replaced the existing image with "new-image.jpg".

Adjusting the appearance of elements was achieved through altering their styles. Using `document.getElementById('title')`, I accessed the element's style object and changed its color property. `document.getElementById('title').style.color = 'blue';` set the heading text to blue.

However, sometimes it's necessary to remove elements from the page. The `remove()` method proved invaluable for this task. By invoking `document.getElementById('title').remove();`, I eliminated the element labeled 'title' from the webpage.

Finally, I explored the `onclick` event, which allows executing JavaScript code in response to a user clicking an element. For instance, I defined a function `changeText()` that updates the heading text and then assigned it to the element's `onclick` attribute: `document.getElementById('title').onclick = changeText;`. This means that whenever the heading is clicked, the text will change to "Text Changed!".