unicorn/prefer-dom-node-append

Require .append() instead of .appendChild() on DOM nodes

fixable

appendChild() takes exactly one node. append() takes any number of nodes, and strings too, so you don't need document.createTextNode() or one call per child.

The rule doesn't know types. It reports every call to a method named appendChild with one argument.

--fix renames the method.

Configure#

Off by default. To turn it on:

bunfig.toml
[lint.rules]
"unicorn/prefer-dom-node-append" = "error" # or "warn"

Examples#

example.js1 problem
const item = document.createElement("li");
list.appendChild(item);
example.jsNo problems
const item = document.createElement("li");
list.append(item);
list.append("Total: ", count, footer);

When not to use it#

appendChild() returns the node it added and append() returns undefined. The rule doesn't check whether you use the result. const item = list.appendChild(node) is reported and fixed like any other call, and after the fix item is undefined. If your code relies on the returned node, leave the rule off, or review what --fix changed.