Creating, removing, and modifying DOM elements
JavaScript programming allows web developers to create new elements in the DOM, remove existing DOM elements, and modify previous DOM element properties in a dynamic order. DOM element customization and update operations help web developers to control and manage dynamic websites and interactive user interfaces.
Creating New DOM Elements in JavaScript.
JavaScript programmers can create new HTML webpage DOM elements by applying the document.createElement() DOM method, which creates a DOM element in the webpage, which can then be added as a DOM element.
Creating New DOM Elements in JavaScript
// A new <p> paragraph DOM element creation process
const textParagraph = document.createElement(‘p’);
// A text node creation process in the JavaScript DOM
const info = document.createTextNode(‘This is a dynamically created paragraph’);
// Add a text node to a <p> element in the JavaScript DOM
textParagraph.appendChild(text);
// Add an ID or class to a new element in an alternate order in the DOM
textParagraph.id = ‘new-paragraph’;
newParagraph.classList.add(‘new-class’);
// Add the new element to the body or any other element in the DOM
document.body.appendChild(newParagraph);
More complex element creation process in the JavaScript DOM.
JavaScript web developers can also create more complex DOM webpage elements, such as <div>, <a>, <ul>, etc., using HTML webpage tags and add them to their webpage in a dynamic order.
// let we Create a new <div> tag element with a class and append it to the webpage body
const testDiv = document.createElement(‘div’);
test.classList.add(‘dynamic-div’);
testDiv.textContent = ‘sample of dynamically ordered div.’;
document.body.appendChild(testDiv);
// let Create a new <a> anchor website link html tag element
const weblink = document.createElement(‘a’);
weblink.href = ‘https://website.com’;
weblink.textContent = ‘let open website.com’;
document.body.appendChild(weblink);
Removing DOM Elements in JavaScript.
JavaScript web developers can remove existing DOM elements from a webpage by applying the remove() method or using the parentNode.removeChild() method.
Use of remove() method in JavaScript webpage.
The remove() method is used to remove a JavaScript webpage DOM element. It should be applied when the web developer has a direct reference to the DOM element that the web developer wants to remove.
// Select the DOM element in the webpage that you want to remove
const elementToRemove = document.getElementById(‘text-paragraph’);
// Remove element from DOM in JavaScript
elementToRemove.remove();
Use of parentNode.removeChild() in JavaScript DOM.
If the web developer does not have direct access to the DOM element that the web developer wants to remove from the webpage where the web developer knows the parent address of the element, then the web developer can use removeChild() in the parent element.
// Select the parent element in the JavaScript web page DOM
const parent = document.body;
// Select the child element to remove the parent DOM element
const elementToRemove = document.getElementById(‘text-paragraph’);
// Remove the child element from the parent in the web page DOM
parent.removeChild(elementToRemove);
Modifying Existing DOM Elements in JavaScript.
After selecting a webpage DOM element in a JavaScript web page, JavaScript web developers can modify that DOM element’s default content, styles, attributes, or other properties.
So, let’s learn the multiple steps to modify DOM elements in JavaScript.
Modifying Text Content in DOM.
JavaScript web developers can modify a webpage text element in a DOM element by using the textContent or innerHTML DOM element properties.
// Modifying text content in the DOM
const paragraph = document.getElementById(‘existing-paragraph’);
paragraph.textContent = ‘ now you see updated text content’;
// Modifying HTML content in the DOM with HTML tags
const div = document.getElementById(‘existing-div’);
div.innerHTML = ‘<strong>now you see a bold text </strong>’;
Modifying attributes in a DOM element.
Web developers can use the setAttribute() method to modify the default attributes of a DOM element in a JavaScript webpage.
/ Modifying the `href` attribute of a link in a DOM element
const weblink = document.getElementById(‘test-link’);
weblink.setAttribute(‘href’, ‘https://website.com’);
/ Modifying the `src` attribute of an image in a DOM element
const image = document.getElementById(‘test-image’);
image.setAttribute(‘src’, ‘home-image.jpg’);
Web developers can directly modify specific attributes in a JavaScript DOM element by applying webpage DOM element properties such as src, href, className, etc.
// Modify the `class` attribute directly in JavaScript DOM
const button = document.getElementById(‘test-button’);
button.className = ‘sample-class’; // Modify the entire class attribute in DOM
// Directly modify `id` in DOM element
const heading = document.getElementById(‘test-heading’);
heading.id = ‘sample-heading-id’;
Modifying DOM element styles.
To modify the styles of an existing DOM element in a JavaScript webpage, web developers can directly modify the style properties of that web element. Where web developers can directly modify multiple CSS properties separately, or modify and apply multiple CSS styles at one time.
/ Modify individual CSS properties in a DOM element
const header = document.getElementById(‘header’);
header.style.backgroundColor = ‘green’;
header.style.color = ‘yellow’;
header.style.fontSize = ‘3 em’;
/ Modify multiple styles in a DOM element
header.style.cssText = ‘background-color: aqua; color: blue; font-size: 3em;’;
Modifying classes in a DOM element.
JavaScript web developers can modify the classes of a DOM element using the classList property.
Class attributes in a DOM element
- add() – It adds one or more classes to an element in the DOM.
- remove() – It removes one or more classes from a DOM element.
- toggle() – It toggles a class in the DOM element, here if the class is not present then first add the class, if the class is present then remove the class.
- contains() – It checks in the DOM element whether the DOM element has a particular class or not.
// Adding a new class to the DOM element
header.classList.add(‘testclass’);
// Removing an existing class from the DOM element
header.classList.remove(‘testclass’);
// Toggling an existing class from the DOM element
header.classList.toggle(‘testclass’);
// Checks if the DOM element has an existing element with a class
if (header.classList.contains(‘testclass’)) {
console.log(‘dom element with testclass’);
DOM element structure modification (nested elements).
JavaScript web developers can also modify the default structure of a webpage DOM element by adding or removing child elements from the DOM element.
// Adding a new <span> tag inside an existing webpage element in the DOM
const container = document.getElementById(‘container’);
const testSpan = document.createElement(‘span’);
newSpan.textContent = ‘we add a new span element here’;
container.appendChild(testSpan);
// Removing the last child element in the DOM
container.removeChild(container.lastElementChild);
Example of creating a new DOM element, modifying, and removing an existing DOM element in a JavaScript webpage.
<div id=”container”>
<h2>Let us try to modify dom element structure</h2>
<button id=”addBtn”>let create New button Element</button>
<button id=”delBtn”>let delete a Last button element</button>
</div>
// let here we Create a new paragraph and append it to the container element
document.getElementById(‘addBtn’).addEventListener(‘click’, () => {
const container = document.getElementById(‘container’);
const testParagraph = document.createElement(‘p’);
testParagraph.textContent = ‘This is a sample test paragraph’;
container.appendChild(testParagraph);
}
// let here we Remove the last child element of the element
document.getElementById(‘delBtn’).addEventListener(‘click’, () => {
const container = document.getElementById(‘container’);
const lastChild = container.lastElementChild;
if (lastChild) {
container.removeChild(lastChild);
}
});
Summary of Creating, Removing, and Modifying DOM elements.
- Creating a new DOM element – Apply the document.createElement() method to create a new DOM element in a JavaScript webpage. Then use the appendChild() method to add them to the DOM.
- Removing an existing DOM element – Use the remove() method to remove an existing DOM element in a JavaScript webpage or use the parentNode.removeChild() method to remove a child element from its parent element.
- Modifying DOM elements.
- DOM element text – You can use textContent or innerHTML in a DOM element to modify text or HTML content in a JavaScript webpage.
- DOM element attributes – Use the setAttribute() method in a DOM element to modify the attributes of a DOM element such as href, src, id, etc. in a JavaScript webpage.
- css styles – Use style properties to modify inline CSS styles in a JavaScript webpage.
- DOM element classes – Use the classList.add(), classList.remove(), and classList.toggle() methods to modify DOM classes in a JavaScript webpage.
