prefer-dom-node-append: Property 'append' does not exist on type 'ChildNode'.

[Samuel-Therrien-Beslogic]

Description

Code using appendChild on a Node should not be autofixed to use append. I think this can be improved by using type information and only raising an issue when (or at the very least not autofixing unless) it is known to be an Element.

This relates to #347

Fail

These are currently working fine and should still work

const foo = (element: Element, htmlElement: HTMLElement) => {
  element.appendChild(node)
  htmlElement.appendChild(node)
}

document.getElementsByName("name")[0]?.appendChild(document.createTextNode("foo"))

Pass

const foo = (node: Node, childNode: ChildNode, untyped,  element: Element) => {
  node.appendChild(node) // Current false positive
  childNode.appendChild(node) // Current false positive
  childNode.appendChild(node) // Current false positive
  element.append(node)
}

document.body.childNodes[0]?.appendChild(document.createTextNode("foo")) // Current false positive

Additional Info

These examples are oversimplified just to get the right type.

[fregante]

A simplified example:

document.body.firstChild!.appendChild(new Text('a'));
// ESLint Error: Prefer `Node#append()` over `Node#appendChild()`.

and then:

document.body.firstChild!.append(new Text('a'));
// TypeScript Error: Property 'append' does not exist on type 'ChildNode'.

So yeah it is true that appendChild works where append doesn't, but that actually is a footgun. Try this perfectly valid TypeScript code:

new Text().appendChild(new Text());
// HierarchyRequestError: The operation would yield an incorrect node tree.

That's a runtime error.

prefer-dom-node-append is technically wrong for suggesting append where it doesn't exist, but if you follow the advice fully it will save you from runtime errors, which means the rule is still valid as is.

Perhaps what I'd suggest is expanding the error/docs to include this piece of information and to fix the error (no such thing as Node#append, it's Element#append)