prefer-modern-dom-apis.md

prefer-modern-dom-apis

📝 Prefer .before() over .insertBefore(), .replaceWith() over .replaceChild(), prefer one of .before(), .after(), .append() or .prepend() over insertAdjacentText() and insertAdjacentElement().

💼 This rule is enabled in the following configs: ✅ recommended, ☑️ unopinionated.

🔧 This rule is automatically fixable by the --fix CLI option.

Enforces the use of:

• childNode.replaceWith(newNode) over parentNode.replaceChild(newNode, oldNode)
• referenceNode.before(newNode) over parentNode.insertBefore(newNode, referenceNode)
• referenceNode.before('text') over referenceNode.insertAdjacentText('beforebegin', 'text')
• referenceNode.before(newNode) over referenceNode.insertAdjacentElement('beforebegin', newNode)

There are some advantages of using the newer DOM APIs, like:

• Traversing to the parent node is not necessary.
• Appending multiple nodes at once.
• Both DOMString and DOM node objects can be manipulated.

Examples

// ❌
parentNode.replaceChild(newNode, oldNode);

// ✅
oldNode.replaceWith(newNode);

// ❌
parentNode.insertBefore(newNode, oldNode);

// ✅
oldNode.before(newNode);

// ❌
referenceNode.insertAdjacentText('beforebegin', 'text');

// ✅
referenceNode.before('text');

// ❌
referenceNode.insertAdjacentText('afterbegin', 'text');

// ✅
referenceNode.prepend('text');

// ❌
referenceNode.insertAdjacentText('beforeend', 'text');

// ✅
referenceNode.append('text');

// ❌
referenceNode.insertAdjacentText('afterend', 'text');

// ✅
referenceNode.after('text');

// ❌
referenceNode.insertAdjacentElement('beforebegin', newNode);

// ✅
referenceNode.before(newNode);

// ❌
referenceNode.insertAdjacentElement('afterbegin', newNode);

// ✅
referenceNode.prepend(newNode);

// ❌
referenceNode.insertAdjacentElement('beforeend', newNode);

// ✅
referenceNode.append(newNode);

// ❌
referenceNode.insertAdjacentElement('afterend', newNode);

// ✅
referenceNode.after(newNode);