JavaScript DOM Manipulation: document.createElement() and Element.remove()

1. document.createElement()

Definition

document.createElement() is a JavaScript method that creates a new HTML element node with the specified tag name. The created element exists in memory and must be appended to the DOM to be visible.

Important Points

• Creates HTML elements (e.g., div, img, p) dynamically.
• Returns a new DOM element node.
• Customize elements using setAttribute(), classList.add(), or innerText.
• Elements are not displayed until appended using methods like append() or appendChild().
• Ideal for generating dynamic content based on user input or data.
• Efficient for creating elements programmatically, but requires proper DOM insertion.

Syntax

const element = document.createElement(tagName);

tagName: A string specifying the element type (e.g., 'div', 'img', 'p').
Returns: A new HTML element node.

Example

Create a div, add a class, set text content, and append it to the body:

const div = document.createElement('div');
div.classList.add('my-class');
div.innerText = 'Hello, World!';
document.body.append(div);

Practical Example

This example generates Pokémon images with their index numbers based on user input.

Generate Pokémon Images

2. Element.remove()

Definition

Element.remove() is a JavaScript method that removes an element (and its children) from the DOM. It is called directly on the element, requiring no reference to its parent.

Important Points

• Removes the specified element from the DOM instantly.
• No return value; modifies the DOM directly.
• Supported in modern browsers (since 2014); use parentNode.removeChild() for older browsers.
• Useful for cleaning up dynamic content or responding to user actions.
• Simple and efficient, as it doesn’t require parent node traversal.
• Only removes the element it’s called on; cannot remove multiple elements at once.

Syntax

element.remove();

element: The DOM element to remove.
No parameters or return value.

Example

Remove a specific div element:

const div = document.querySelector('.my-div');
div.remove();