DOM Mutation APIs

DOM mutation APIs let JavaScript create, insert, move, replace, and remove nodes in a document. Common methods include `append`, `remove`, `replaceChildren`, and `insertBefore`.

The DOM represents an HTML document as a tree of nodes. Mutation APIs change that tree after the page has loaded, allowing JavaScript to update content and structure without replacing the entire document.

`append` adds nodes or text at the end of a parent. `insertBefore` places a node immediately before another child, while `remove` removes a node from its current parent. A node can also be moved by inserting it into a new location; the DOM does not clone it automatically.

`replaceChildren` removes all existing children of an element and then inserts the supplied nodes or text. This is useful when an element's complete child content should be rebuilt in one operation.

Mutation methods can accept existing DOM nodes and, for some APIs, strings. When inserting strings through APIs such as `append`, the strings become text nodes rather than being interpreted as HTML markup. For untrusted HTML, avoid APIs that parse strings as HTML unless the content has been appropriately handled.

Key points

• Use `append` to add content at the end of a parent.
• Use `insertBefore` when insertion must occur at a specific position.
• Use `remove` to detach a node from its parent.
• Use `replaceChildren` to replace all children of an element.
• Inserting an existing node moves it rather than creating a duplicate node.

Interview questions

How would you add a new element to the DOM?

Create the element with `document.createElement`, configure its properties or text, and insert it with a mutation method such as `append`. For example, `parent.append(child)` adds the node at the end of the parent's children. If the node already belongs elsewhere, inserting it moves it rather than cloning it.

What is the difference between `append`, `appendChild`, and `insertBefore`?

`append` adds one or more nodes or strings to the end of an element. `appendChild` adds a single `Node` as the final child and returns that node. `insertBefore` places a node immediately before a specified reference child, making it useful when ordering matters.

What happens when you insert a DOM node that already exists elsewhere?

The existing node is moved to its new location rather than copied. Its identity remains the same, so references to that node continue to refer to the same object. If a duplicate is required, you need to explicitly clone the node, commonly with `cloneNode`.

How would you replace all children of an element?

Use `replaceChildren` with the new nodes or text values. It first removes the element's existing children and then inserts the supplied content. This is often clearer than manually removing each child when the complete child structure needs to be replaced.

What security concern should you consider when changing DOM content?

The main concern is whether an API parses supplied strings as HTML. APIs such as `append` treat string arguments as text, while HTML-parsing mechanisms can create elements from markup and may introduce injection risks when given untrusted content. For user-controlled data, prefer text or node-based APIs unless HTML parsing is explicitly required and the content has been safely handled.