Tutorial

Sign Up

log In

JS
Js Add and Remove Element

❮ Previous

Next ❯

JavaScript provides powerful tools to dynamically add and remove elements in the DOM. These operations are useful for creating interactive web applications, updating UI, and managing content.


Creating Elements:

The createElement() method create a new element

Example
<script>
const newElement = document.createElement('div');
newElement.textContent = 'This is a new element!';
console.log(newElement);
</script>

Try it yourself

Adding Elements:

To add elements to the DOM, you typically use the following methods:

1. Using appendChild()

Adds a new child element as the last child of a parent element.

Example
<div id="parent">
<div>Child 1</div>
</div>
<script>
const parent = document.getElementById('parent');
const newElement = document.createElement('div');
newElement.textContent = 'This is a new element!';
parent.appendChild(newElement); // Adds the new element as the last child
</script>

Try it yourself

2. Using append()

Similar to appendChild(), but more versatile as it can append multiple nodes and text.

Example
<div id="parent"></div>
<script>
const parent = document.getElementById('parent');
const newElement = document.createElement('div');
newElement.textContent = 'This is another element!';
parent.append('Text before element', newElement, 'Text after element');
</script>

Try it yourself

3. Using prepend()

Adds a new child element as the first child of a parent element.

Example
<div id="parent">
<div>Child 1</div>
</div>
<script>
const parent = document.getElementById('parent');
const newElement = document.createElement('div');
newElement.textContent = 'This is a new element!';
parent.prepend(newElement); // Adds the new element as the first child
</script>

Try it yourself

4. Using insertBefore()

Inserts a new element before an existing child of a parent element.

Example
<div id="parent">
<div id="child1">Child 1</div>
<div id="child2">Child 2</div>
</div>
<script>
const parent = document.getElementById('parent');
const newElement = document.createElement('div');
newElement.textContent = 'Inserted before another element!';
const child2 = document.getElementById('child2');
parent.insertBefore(newElement, child2); // Adds newElement before child2
</script>

Try it yourself

Removing Elements

To remove elements, you can use these methods:

1. Using removeChild()

Removes a child element from its parent.

Example
<div id="parent">
<div id="child">Child 1</div>
<div>This is a new element!</div>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.removeChild(child); // Removes the child element
</script>

Try it yourself

2. Using remove()

Directly removes an element from the DOM.

Example
<div id="parent">
<div id="child">Child 1</div>
<div>This is a new element!</div>
</div>
<script>
const element = document.getElementById('child');
element.remove(); // Removes the element
</script>

Try it yourself

3. Using replaceChild()

Replaces an existing child element with a new element.

Example
<div id="parent">
<div id="child">Child 1</div>
<div>This is a new element!</div>
</div>
<script>
const parent = document.getElementById('parent');
const newElement = document.createElement('div');
newElement.textContent = 'Replaced element!';
const oldElement = document.getElementById('child');
parent.replaceChild(newElement, oldElement); // Replaces oldElement with newElement
</script>

Try it yourself

❮ Previous

Next ❯
Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.