JavaScript createElement

Learn how to use JavaScript's createElement method effectively with examples and detailed explanations. Enhance your web development skills with this step-by-step tutorial.

dom

Aug 29, 2025

JavaScript createElement

last modified April 2, 2025

In this article, we explore the document.createElement method in JavaScript. This method is essential for dynamic DOM manipulation, allowing developers to create new elements programmatically.

Basic Definition

The document.createElement method creates the HTML element specified by tagName. The created element is not automatically added to the document; you must explicitly append it to the DOM tree.

This method returns a new HTML element that can be modified with properties and attributes before being inserted into the page. It’s a fundamental tool for dynamic web content generation.

Creating a Simple Element

This example demonstrates how to create a basic paragraph element and add it to the document body.

index.html

<!DOCTYPE html> <html> <head> <title>Basic createElement</title> </head> <body>

// Add text content to the paragraph
para.textContent = 'This is a dynamically created paragraph.';

// Append the paragraph to the document body
document.body.appendChild(para);

</script>

</body> </html>

In this basic example, we create a paragraph element using document.createElement(‘p’). We then set its text content and append it to the document body.

This demonstrates the fundamental three-step process of creating elements: creation, configuration, and insertion. The element exists in memory until appended to the DOM.

Creating an Element with Attributes

This example shows how to create an element and set attributes before adding it to the document.

index.html

<!DOCTYPE html> <html> <head> <title>Element with Attributes</title> </head> <body>

// Set multiple attributes
link.href = 'https://example.com';
link.textContent = 'Visit Example.com';
link.target = '_blank';
link.className = 'external-link';

// Append to container div
document.getElementById('container').appendChild(link);

</script>

</body> </html>

Here we create an anchor element and set several attributes including href, target, and className. The element is then added to a specific container div.

This demonstrates how to configure an element with various properties before insertion. Both direct property assignment and setAttribute can be used.

Creating Nested Elements

This example demonstrates how to create a more complex structure with nested elements.

index.html

<!DOCTYPE html> <html> <head> <title>Nested Elements</title> </head> <body>

// Create a heading
const heading = document.createElement('h2');
heading.textContent = 'Product Card';

// Create a paragraph
const para = document.createElement('p');
para.textContent = 'This is a product description.';

// Create a button
const button = document.createElement('button');
button.textContent = 'Add to Cart';

// Build the nested structure
div.appendChild(heading);
div.appendChild(para);
div.appendChild(button);

// Add to document
document.body.appendChild(div);

</script>

</body> </html>

In this example, we create multiple elements and nest them to form a card component. The elements are assembled before being added to the document.

This shows how to build complex DOM structures programmatically. The order of appending determines the final nesting structure in the document.

Creating Elements with Event Listeners

This example shows how to create an element and attach an event listener to it.

index.html

<!DOCTYPE html> <html> <head> <title>Element with Event</title> </head> <body>

// Add event listener
button.addEventListener('click', function() {
    const output = document.getElementById('output');
    output.textContent = 'Button was clicked!';
});

// Add to document
document.body.appendChild(button);

</script>

</body> </html>

Here we create a button element and attach a click event listener before adding it to the document. The listener updates another element when clicked.

This demonstrates how to make dynamic elements interactive. Event listeners can be added at creation time or later as needed.

Creating Form Elements

This example demonstrates creating a complete form with multiple input elements.

index.html

<!DOCTYPE html> <html> <head> <title>Dynamic Form</title> </head> <body>

// Create username input
const usernameLabel = document.createElement('label');
usernameLabel.textContent = 'Username:';
usernameLabel.htmlFor = 'username';

const usernameInput = document.createElement('input');
usernameInput.type = 'text';
usernameInput.id = 'username';
usernameInput.name = 'username';
usernameInput.required = true;

// Create password input
const passwordLabel = document.createElement('label');
passwordLabel.textContent = 'Password:';
passwordLabel.htmlFor = 'password';

const passwordInput = document.createElement('input');
passwordInput.type = 'password';
passwordInput.id = 'password';
passwordInput.name = 'password';
passwordInput.required = true;

// Create submit button
const submitButton = document.createElement('button');
submitButton.type = 'submit';
submitButton.textContent = 'Login';

// Build form structure
form.appendChild(usernameLabel);
form.appendChild(usernameInput);
form.appendChild(document.createElement('br'));
form.appendChild(passwordLabel);
form.appendChild(passwordInput);
form.appendChild(document.createElement('br'));
form.appendChild(submitButton);

// Add form to document
document.body.appendChild(form);

</script>

</body> </html>

This example creates a complete login form with labels, inputs, and a submit button. All elements are created and configured programmatically.

It demonstrates how to build complex interactive forms dynamically. Each form element is created with appropriate attributes for proper functionality.

Source

MDN createElement Documentation

In this article, we have shown how to use document.createElement in JavaScript. This method is fundamental for dynamic DOM manipulation and content generation in web development.

Author

My name is Jan Bodnar, and I am a passionate programmer with extensive programming experience. I have been writing programming articles since 2007. To date, I have authored over 1,400 articles and 8 e-books. I possess more than ten years of experience in teaching programming.

List all JS DOM tutorials.