Creating Elements in JavaScript
DOM Element Creation

Introduction to Creating Elements

In JavaScript, you can dynamically create new HTML elements using the document.createElement() method. This allows developers to build content on-the-fly, making webpages more interactive and responsive.

This is especially useful for scenarios like:

• Adding a new message to a chat app
• Inserting cards or tiles in a UI
• Dynamically generating a list of results after API calls

Basic Syntax

const newElement = document.createElement("tagName");

Once created, you can modify its attributes, content, or style, and insert it into the DOM using methods like appendChild() or append().

Example 1: Creating a Paragraph and Adding Text

// Create a new paragraph element
const para = document.createElement("p");

// Set its text content
para.textContent = "Hello! I was created using JavaScript.";

// Add it to the body
document.body.appendChild(para);
    

Output:

<p>Hello! I was created using JavaScript.</p>

Question:

What happens if you don't append the element to the DOM?

Answer: The element will exist in memory but won’t be visible on the page. You must append it using appendChild, append, or similar methods to make it appear.

Example 2: Creating a List Item and Adding to an Existing List

// Suppose there is an existing ul with id 'myList'
const listItem = document.createElement("li");
listItem.textContent = "New List Item";

// Find the existing list in the document
const list = document.getElementById("myList");

// Append the new list item
list.appendChild(listItem);
    

Output:

<li>New List Item</li> added to <ul id="myList">

Example 3: Adding Attributes and Styles

const div = document.createElement("div");

// Add content
div.textContent = "I'm a styled box";

// Set an ID and class
div.id = "box1";
div.className = "blue-box";

// Add some inline styles
div.style.padding = "10px";
div.style.backgroundColor = "lightblue";

// Append to the body
document.body.appendChild(div);
    

Output:

<div id="box1" class="blue-box">I'm a styled box</div> with light blue background

Question:

How do you set multiple attributes at once?

Answer: Use setAttribute() for each attribute:

div.setAttribute("data-role", "dialog");
div.setAttribute("title", "Info Box");
    

Example 4: Creating Elements with Nested Children

// Create a container div
const container = document.createElement("div");

// Create a heading
const heading = document.createElement("h2");
heading.textContent = "Dynamic Card";

// Create a paragraph
const desc = document.createElement("p");
desc.textContent = "This content was generated using JavaScript.";

// Append children to container
container.appendChild(heading);
container.appendChild(desc);

// Append container to the body
document.body.appendChild(container);
    

Output:

<div>
  <h2>Dynamic Card</h2>
  <p>This content was generated using JavaScript.</p>
</div>
    

Recap

• Use document.createElement() to create new elements.
• Modify content using textContent or innerHTML.
• Use appendChild() or append() to place the element in the DOM.
• Set attributes with setAttribute() or directly as element.id, element.className.

Practice Exercise

Create a function createCard(title, message) that generates a styled card element with a heading and paragraph, and appends it to the body.