Javascript Adding and removing elements

JavaScript provides a variety of methods to add and remove elements from the DOM (Document Object Model). These methods allow developers to manipulate the structure and content of web pages dynamically.

Adding Elements

createElement()

The createElement() method is used to create an HTML element with the specified tag name. This method returns the newly created element.

const newParagraph = document.createElement('p');

createTextNode()

The createTextNode() method is used to create a text node with the specified text. This method returns the newly created text node.

const newContent = document.createTextNode('This is a new paragraph.');

appendChild()

The appendChild() method is used to add a new child element to the end of a parent element. This method takes a single parameter, which is the new child element to be added.

const parent = document.getElementById('myList');
parent.appendChild(newListItem);

insertBefore()

The insertBefore() method is used to add a new child element before a specified child element. This method takes two parameters, the new child element to be added and the child element before which the new element should be added.

const parent = document.getElementById('myList');
parent.insertBefore(newListItem, existingListItem);

innerHTML

The innerHTML property can be used to add HTML content to an element. This property sets or returns the HTML content of an element, including any child elements.

const parent = document.getElementById('myDiv');
parent.innerHTML = '<h1>Welcome!</h1>';

Removing Elements

removeChild()

The removeChild() method is used to remove a child element from its parent. This method takes a single parameter, which is the child element to be removed.

const parent = document.getElementById('myList');
const child = document.getElementById('item2');
parent.removeChild(child);

replaceChild()

The replaceChild() method is used to replace a child element with a new child element. This method takes two parameters, the new child element to be added and the child element to be replaced.

const parent = document.getElementById('myList');
const newChild = document.createElement('li');
const oldChild = document.getElementById('item2');
parent.replaceChild(newChild, oldChild);

These are some of the methods to add and remove elements from the DOM using JavaScript. These methods can be used in combination to create dynamic and interactive web pages.

Previous
Next