WS
WhereIsStuff
Tutorial Forum
Log In Sign Up

Advertisement

Google Ad Slot: content-top

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