unicorn/prefer-dom-node-append

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 if the call is a statement of its own and the file shows that the object is a DOM node: document.body, document.createElement(), document.querySelector() and the like, or a variable that's declared with one of these and never assigned again. --fix-dangerously renames the others.

Configure#

Off by default. To turn it on:

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

Examples#

const item = document.createElement("li");
list.appendChild(item);

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 like any other call, and after --fix-dangerously item is undefined. If your code relies on the returned node, leave the rule off.