Adding Adjacent Elements
Explore how to extend the HTML document tree by adding sibling elements and text nodes using JavaScript methods like insertAdjacentText, insertAdjacentElement, and insertAdjacentHTML. Learn different insertion positions and see practical code examples to manipulate the DOM for responsive page updates.
We'll cover the following...
To extend the document tree, it is not enough to add child nodes to HTML elements. You also need to add sibling elements and text to existing HTML tags. Unfortunately, the HTML DOM standard does not contain any method that can be used to add sibling nodes directly before or after a certain document tree node.
A few browser vendors extend the standard DOM API with extra operations.
For example, Google Chrome, Opera, Safari, and Internet Explorer provide three additional methods, insertAdjacentText(), insertAdjacentElement(), and insertAdjacentHTML() which can be used for this task.
Firefox does not implement these operations. In this ...