DOM Manipulation (Javascript)

How to manipulate the HTML DOM using Javascript.

Elements

X = document.createTextNode('text')
X = document.createElement('li')

Alteration

X.className = 'class'
X.id = 'id'
X.setAttribute('name', 'value')
X.innerHTML = 'italics
X.insertAdjacentHTML(position, Y) will insert HTML string Y at position of element X. (This method is much better than an innerHTML +=) The positions are as follows:

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

X.textContent = 'text'
X.innerText = 'text'
X.childNodes[n].nodeValue = '...' will allow you to change the inner text of an element, even when it includes another element (e.g. changing some more text in yeahsome more text)

Insertion

X.appendChild(Y) will append element Y as the last child of element X
X.prepend(Y) will prepend element Y as the first child of element X
X.parentNode.insertBefore(Y, X); will insert element Y directly before element X
X.parentNode.insertBefore(Y, X.nextSibling); will insert element Y directly after element X

Duplication

X.cloneNode(true) will return a copy of the selected element.

Search

X.querySelector(Y) will find the first element based on CSS element search Y within the tree of elements found at X.
X.querySelector(Y) will find all elements based on CSS element search Y within the tree of elements found at X.
X.closest(Y) will find an element based on CSS element search Y from element X up through all of the parents to the top of the DOM

DOMParser

The DOMParser allows you to parse HTML in as a string, returning an HTMLDocument object. This allows you to interact with the DOM elements and alter them much more simply and easily than using regex or find/replace in a text-editor.

The DOMParser operates very similarly to jQuery's ability to parse HTML in as a string within $('<input>'). The difference is that DOMParser returns an HTMLDocument instead of a jQuery object.

Importing Plain Text

const parser = new DOMParser();
const htmlDoc = parser.parseFromString(input, 'text/html');

Exporting Plain Text

You can return each of the top level elements (head, body) as plain text using innerHTML.

return htmlDoc.body.innerHTML;

References

Last modified: 202401040446