This rule raises an issue when legacy DOM manipulation methods like replaceChild(), insertBefore(), insertAdjacentText(), or insertAdjacentElement() are used instead of their modern equivalents.

Why is this an issue?

Legacy DOM manipulation methods like replaceChild() and insertBefore() require more verbose code and often need you to traverse to parent nodes unnecessarily.

For example, parentNode.replaceChild(newNode, oldNode) requires you to access the parent node and remember the correct parameter order. The modern oldNode.replaceWith(newNode) is more intuitive - you call the method directly on the element you want to replace.

Similarly, insertAdjacentText() and insertAdjacentElement() use position strings like 'beforebegin' or 'afterend' that are harder to remember and less readable than the descriptive method names like before(), after(), append(), and prepend().

The modern methods also offer additional benefits:

• They accept multiple arguments, allowing you to insert several nodes at once
• They work with both DOM nodes and text strings
• They have more descriptive names that make code self-documenting
• They eliminate the need to traverse to parent nodes in many cases

What is the potential impact?

Using legacy DOM methods makes code harder to read and maintain. The verbose syntax and required parent node traversal increase the chance of errors and make the code less intuitive for other developers.

How to fix?

Replace replaceChild() with replaceWith() called directly on the element to be replaced.

Non-compliant code example

parentNode.replaceChild(newElement, oldElement); // Noncompliant

Compliant code example

oldElement.replaceWith(newElement);

Documentation

• eslint-plugin-unicorn - Rule prefer-modern-dom-apis
• MDN: ChildNode.before() - Documentation for the modern before() method
• MDN: ChildNode.after() - Documentation for the modern after() method
• MDN: ChildNode.replaceWith() - Documentation for the modern replaceWith() method
• MDN: Element.append() - Documentation for the modern append() method
• MDN: Element.prepend() - Documentation for the modern prepend() method