Day 20 - DOM - Create Element & Event listener

We use this JavaScript method to create a new HTML element:

document.createElement('tagName')

Replace 'tagName' with the HTML tag you want to create, like 'div', 'p', 'button', etc.

Example: Create a New Paragraph and Add It to the Page

// Step 1: Create the paragraph element
const newParagraph = document.createElement('p');

// Step 2: Add text inside the paragraph
newParagraph.textContent = 'This is a new paragraph added by JavaScript.';

// Step 3: Add the paragraph to the page inside the body
document.body.appendChild(newParagraph);

Step-by-Step Summary

Step	What to do
1	Use `document.createElement('tagName')` to make a new element.
2	Add content or attributes (text, id, class).
3	Attach the element to the page with `.appendChild()` or `.insertBefore()`.

Task -

Create a new <p> element with your name and add it to the page.
Create a new <button> element with text "Click Me" and add it below the existing content.

Final Hard Task

Create a <ul> (unordered list) element.
Inside it, create and add 3 <li> elements with names of your favorite fruits.
Add this list to the page.

🧠 innerText vs innerHTML vs textContent

1. `innerText`

Shows or changes the text inside an element.

Example: Create a New Paragraph and Add It to the Page

Step-by-Step Summary

🧠 innerText vs innerHTML vs textContent

1. innerText

1. `innerText`