addEventListener, createElement, appendChild, and Hoisting in JavaScript (Hoisted,Non Hoisted)

** addEventListener**

Definition:

addEventListener attaches an event handler function to an element. The function runs whenever the specified event occurs (like click, input, or keydown).

Why we use it:

• Keeps JavaScript separate from HTML (cleaner than inline onclick).
• Allows multiple event listeners on the same element.
• Supports removing events (removeEventListener).

When to use it:

Whenever you want your code to react to user actions (button clicks, typing, mouseover, scrolling, etc.).

Example:

<button id="btn">Click Me</button>
<script>
  const btn = document.getElementById("btn");

  btn.addEventListener("click", () => {
    alert("Button was clicked!");
  });
</script>

** createElement**

Definition:

createElement is used to create a new HTML element dynamically with JavaScript.

Why we use it:

Add new elements without writing them in HTML beforehand.

Useful for dynamic content like to-do lists, shopping carts, chat apps.

When to use it:

When you need to build or insert elements at runtime.

Example:

<ul id="list"></ul>
<script>
  const list = document.getElementById("list");

  const li = document.createElement("li");  // create <li>
  li.textContent = "Learn JavaScript";      // add text
  list.appendChild(li);                     // add to <ul>
</script>

** Hoisting in JavaScript**

Definition:

• Hoisting is JavaScript’s behavior of moving declarations to the top of their scope before execution.

• Only declarations are hoisted, not initializations.

Hoisted

Function Declarations

sayHello(); // it Works, because function is hoisted

function sayHello() {
  console.log("Hello World!");
}

• var Variables (but initialized as undefined)

console.log(x); // (undefined)
var x = 10;

Not Hoisted

Function Expressions

sayHi(); // ( Error)

const sayHi = function() {
  console.log("Hi!");
};

let and const Variables (TDZ: Temporal Dead Zone)

console.log(a); //( Error)
let a = 20;

appendChild ()

• It is used to insert a node (like ,
• ,

  , etc.) as the last child of a parent element.

Only one node can be appended at a time.

Why do we use appendChild()

• add new elements dynamically to the webpage.
• Helps when building lists, adding items in a cart, inserting chat messages, etc.

When do we use appendChild?

• When we first create an element using document.createElement().
• When we want to move an element from one parent to another.

ex

<ul id="todos"></ul>

<script>
  const todos = document.getElementById("todos");

  // create a new list item
  const li = document.createElement("li");
  li.textContent = "Learn JavaScript";

  // append it to the <ul>
  todos.appendChild(li);
</script>