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

My webdevelopment learning journey continues

Today I learned about JavaScript DOM manipulation and how to create, modify, and delete HTML elements dynamically using JavaScript.

1. document.getElementById()

Used to select an HTML element using its unique ID.

let heading = document.getElementById("title");

2. document.createElement()

Used to create a new HTML element.

let newElement = document.createElement("p");
newElement.textContent = "Hello JavaScript!";

3. appendChild()

Used to add a new element as a child of another element.

document.body.appendChild(newElement);

4. Change Text

`I learned how to change the text of an HTML element using JavaScript.

document.getElementById("title").textContent = "Welcome!";`

5. Change Image

I learned how to change an image dynamically using the src property.

document.getElementById("myImage").src = "new-image.jpg";

6. Change Color

I learned how to change the color of an element using JavaScript.

document.getElementById("title").style.color = "blue";

7. Delete an HTML Element

I learned how to remove an element from a webpage using the remove() method.

document.getElementById("title").remove();

8. onclick

I learned how to execute a JavaScript action when an element is clicked.

`Click Me

function changeText() {
document.getElementById("title").textContent = "Text Changed!";
}`