Legacy Dom Manipulation

ID

javascript.legacy_dom_manipulation

Severity

info

Remediation Complexity

trivial

Remediation Risk

low

Remediation Effort

low

Resource

Best Practice

Language

JavaScript

Tags

best-practice, dom, simplification

Description

Reports the first-generation DOM mutation calls — appendChild, insertBefore, removeChild, replaceChild — and the innerHTML assignment, where a modern method says the same thing in one step.

list.appendChild(item);            // FLAW — list.append(item)
list.insertBefore(item, first);    // FLAW — first.before(item)
list.removeChild(item);            // FLAW — item.remove()
list.replaceChild(fresh, stale);   // FLAW — stale.replaceWith(fresh)
panel.innerHTML = "";              // FLAW — panel.replaceChildren()

A call whose return value is used is not reported. The legacy methods return the node they operated on and the modern ones return nothing, so at those call sites the swap is not the one-line change this rule is advising.

Rationale

  • Each legacy call forces the caller to hold the wrong object. Removing a node needs its parent, so the call site carries a node.parentNode.removeChild(node) that fails when the node is already detached. Inserting before a sibling needs the parent too, and passing null as the reference silently turns the insert into an append.

  • The modern methods are called on the node the operation is about, take several children at once, and accept strings — so appending text no longer needs a createTextNode.

  • innerHTML = value is in the list for a different reason: it re-parses a string into markup, so a value that was only ever meant to be text becomes elements.

Remediation

Call the method on the node the operation is about.

list.append(item, "and some text");
first.before(item);
item.remove();
stale.replaceWith(fresh);

panel.textContent = message;   // the value is text
panel.replaceChildren();       // the element is being emptied

References

© 2026 Xygeni. All rights reserved