This lesson covers essential techniques in JavaScript for dynamic HTML manipulation, focusing on creating new elements, updating their content and style, and appending them to the Document Object Model (DOM).

• createElement(): This method is used to create new HTML elements dynamically.

let heading = document.createElement("h1");  // Creates an <h1> element

• Updating Elements: Once an element is created, its content and style can be updated using properties like innerHTML and style.

heading.innerHTML = "About Me";                // Sets the content of the heading
heading.style.backgroundColor = "pink";       // Sets the background color of the heading

• appendChild(): This method adds the newly created and updated element to the DOM, making it visible on the webpage.

document.body.appendChild(heading);           // Appends the heading to the body of the document

Creating and appending a simple paragraph to the body of an HTML document:

// Step 1: Create the element
let paragraph = document.createElement("p");

// Step 2: Update the content of the element
paragraph.innerHTML = "I love JavaScript!";

// Step 3: Append the element to the body of the document
document.body.appendChild(paragraph);

Happy coding! 😊