'cloneNode result not passable to Jquery append in TypeScript

The following code uses cloneNode to create a new Node but JQuery doesn't consider it to be a Node when trying to pass it into the append function. Why not?

const addLinesBad = function(lines: string[]) {
    const br = document.createElement('br');
    for (let line of lines) { //simplified for example
        $('#content').append(document.createTextNode(line));
        const newBR = br.cloneNode(); //newBR is of type 'Node'
        const newBRJquery = $(newBR); //This is a JQuery<Node> but doesn't help in the next line
        /* TS(2769) Error on next line: No overload matches this call.
        Overload 1 of 2, '(...contents: (string | TypeOrArray<Node | JQuery<Node>>)[]): JQuery<HTMLElement>', gave the following error.
            Argument of type 'Node' is not assignable to parameter of type 'string | TypeOrArray<Node | JQuery<Node>>'.
            Type 'Node' is missing the following properties from type 'DocumentFragment': getElementById, childElementCount, children, firstElementChild, and 6 more.
        Overload 2 of 2, '(funсtion: (this: HTMLElement, index: number, html: string) => string | TypeOrArray<Node | JQuery<Node>>): JQuery<HTMLElement>', gave the following error.
            Argument of type 'Node' is not assignable to parameter of type '(this: HTMLElement, index: number, html: string) => string | TypeOrArray<Node | JQuery<Node>>'.
            Type 'Node' provides no match for the signature '(this: HTMLElement, index: number, html: string): string | TypeOrArray<Node | JQuery<Node>>'.
        */
        $('#content').append(newBR);
    }
}

With the expected parameter type TypeOrArray<Node | JQuery<Node>> I would expect a Node or a JQuery to work just fine, but neither do.
The JQuery type definitions include:

declare namespace JQuery {
    type TypeOrArray<T> = T | T[];


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source