3.1 Creating Elements
Working with the DOM (Document Object Model) isn't just about moving around existing elements; it's also about creating new elements, inserting them into the document, and removing them. Let's check out the various methods and approaches for creating and removing elements in the DOM.
Method document.createElement()
The main method for creating a new element in the DOM is document.createElement(). This method takes the tag name of the element you want to create and returns a new empty element.
Example:
const newDiv = document.createElement('div');
Adding Content to an Element
After creating a new element, you can fill it with content. This can be text, other elements, or a combination of both.
Example:
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
You can also use the innerHTML property to add HTML content.
Example:
const newDiv = document.createElement('div');
newDiv.innerHTML = '<strong>This is a new div element with bold text</strong>';
3.2 Inserting Elements into the DOM
Once you've created an element, you need to add it to the document. There are several methods for inserting elements into the DOM:
1. Method appendChild()
The appendChild() method adds an element to the end of the list of child elements of a specified parent element.
Example:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.appendChild(newDiv);
2. Method insertBefore()
The insertBefore() method adds an element before a specified child element of a parent element.
Example:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
<p>This is a paragraph</p>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
const referenceElement = document.querySelector('p');
body.insertBefore(newDiv, referenceElement);
3. Method append()
The append() method adds one or more nodes or strings to the end of the list of child elements of a specified parent element.
Example:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.append(newDiv);
4. Method prepend()
The prepend() method adds one or more nodes or strings to the beginning of the list of child elements of a specified parent element.
Example:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.prepend(newDiv);
3.3 Cloning Elements
The cloneNode() method lets you clone an element. Cloning can be deep (copying all child elements) or shallow (just the element itself).
Example of deep cloning:
<html>
<head>
<style>
div {
padding: 5px;
min-height: 50px;
color: #fff;
border-bottom: 1px solid lightblue;
background: mediumpurple;
}
</style>
<title>Document</title>
</head>
<body>
<div>
This is a div element
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(true);
document.body.appendChild(clonedDiv);
Example of shallow cloning:
<html>
<head>
<style>
div {
padding: 5px;
min-height: 50px;
color: #fff;
border-bottom: 1px solid lightblue;
background: mediumpurple;
}
</style>
<title>Document</title>
</head>
<body>
<div>
This is a div element
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(false);
document.body.appendChild(clonedDiv);
The <div> element was cloned, which you can see from the styles, but its child elements (the text node "This is a div element" and the <ul>) weren't cloned.
3.4 Removing Elements
1. Method removeChild()
The removeChild() method removes a child element from a parent element.
Example:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
</div>
</body>
</html>
const parent = document.querySelector('div');
const child = document.querySelector('p');
parent.removeChild(child);
2. Method remove()
The remove() method removes an element directly from the DOM.
Example:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is a div element</div>
<p>This is a paragraph</p>
</body>
</html>
const element = document.querySelector('div');
element.remove();
3. Clearing the Element's Content
You can use the innerHTML property to remove all content from an element by setting it to an empty string.
Example:
<html>
<head>
<title>Document</title>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
</head>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
</div>
</body>
</html>
const element = document.querySelector('div');
element.innerHTML = '';
4. Removing All Child Elements
To remove all child elements, you can use a loop or the innerHTML method.
Loop Example:
<html>
<head>
<title>Document</title>
</head>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</div>
</body>
</html>
const parent = document.querySelector('div');
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
innerHTML Example:
<html>
<head>
<title>Document</title>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
</head>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
const parent = document.querySelector('div');
parent.innerHTML = '';
GO TO FULL VERSION