Element Modification

Once you retrieve the reference to an element in the DOM, you can modify any of the element's properties.

Modify content

element.textContent = 'Hello 🌏';

HTML content can be controlled using element.innerHTML attribute but this approach is dangerous as it can lead to XSS (Cross-Site Scripting) vulnerabilities.

In addition to the security issues, updating the innerHTML forces the browser to parse the HTML then update the DOM content. This can have bad performance results.

Modify properties

/* Toggle `disabled` state. */
button.disabled = !button.disabled;

link.src = `https://wishtack.io`;

Modify the structure

Create a DOM element

const child = document.createElement('div');

Append an element

parent.appendChild(child);

Remove an element

parent.removeChild(child);

CSSOM (CSS Object Model)

/* Update some CSS style. */
element.style.backgroundColor = 'red';

/* Added a CSS class to an element. */
element.classList.add('blog-post-content');

/* Toggle a CSS class. */
element.classList.toggle('important');