 |
VOOZH | about |
|
VOOZH | about |
In the previous two installments of the Understanding the DOM series, we learned How To Access Elements in the DOM and How To Traverse the DOM. Using this knowledge, a developer can use classes, tags, ids, and selectors to find any node in the DOM, and use parent, child, and sibling properties to find relative nodes.
The next step to becoming more fully proficient with the DOM is to learn how to add, change, replace, and remove nodes. A to-do list application is one practical example of a JavaScript program in which you would need to be able to create, modify, and remove elements in the DOM.
In this tutorial, we will go over how to create new nodes and insert them into the DOM, replace existing nodes, and remove nodes.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
The Document Object Model, usually referred to as the DOM, is an essential part of making websites interactive. It is an interface that allows a programming language to manipulate the content, structure, and style of a website. JavaScript is the client-side scripting language that connects to the DOM in an internet browser.
Browse Series: 8 tutorials
Software engineer and open source creator
Community and Developer Education expert. Former Senior Manager, Community at DigitalOcean. Focused on topics including Ubuntu 22.04, Ubuntu 20.04, Python, Django, and more.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
These are really helpful. Thankyou!
Great tutorials! Your presentation and writing style is very clear!
I’ve been trying to learn more about innerHTML and thought XSS attacks were possible when using innerHTML connected to forms (i.e. user input). Otherwise, using innerHTML to just add HTML to the DOM isn’t vulnerable to XSS. Is that how you understand it, too?
function showAnswer() {
const answer = "<p>The answer is <strong>Ada Lovelace</strong>!</p>";
document.querySelector('body').innerHTML = answer;
}
I also looked into .insertAdjacentHTML() as a “safer” way to add HTML via JS.
An easy riff for appending is using the ‘beforeend’ 1st argument + the content to append.
function showAnswer() {
const answer = "<p>The answer is <strong>Ada Lovelace</strong>!</p>";
document.querySelector('body').insertAdjacentHTML('beforeend', answer);
}
very good documentation. I am very glad for finding this documentation.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
