如何获取克隆元素的 outerHTML？

Question

我试图避免 jQuery，只需要克隆一个元素，例如

var table: Node = document.querySelector('#myTable').cloneNode(false);

稍后，我需要

return table.outerHTML;

但我遇到了错误

ERROR in [at-loader] ./src/components/overworld-component.tsx:24:43
TS2339: Property 'outerHTML' does not exist on type 'Node'.

其中，有道理。只有 Element 有 outerHTML.

我在这里应该做什么？

以某种方式将 Node 转换为 Element 因为我知道它肯定是 Element?
找到其他方法来克隆元素（没有子元素），但作为一个元素？

或者，我在更上游做错了什么？也许我根本不需要使用 outerHTML ？我以为我需要 React 中的 outerHTML for dangerouslySetInnerHTMLing:

export class OverworldComponent extends React.Component<OverworldComponentProps, {}> {
    render() {
        var table: Node = document.querySelector('div.file div.data table').cloneNode(false);
        return <div id="overworld-viewer"
                    dangerouslySetInnerHTML=
                        { { __html: table.outerHTML } } />;
    }
}

Answer 1

不要指定数据类型，只需使用'any'

var table: any = document.querySelector('#myTable').cloneNode(false);

或者

var table: HTMLElement = <any>document.querySelector('#myTable').cloneNode(false);

Answer 2

直接保存outerHTML怎么样？

    export class OverworldComponent extends React.Component<OverworldComponentProps, {}> {
        render() {
            var outerHTML: string = document.querySelector('div.file div.data table').outerHTML;
            return <div id="overworld-viewer"
                        dangerouslySetInnerHTML=
                            { { __html: outerHTML } } />;
        }
    }

或者你可以施放 cloneNode:

var table: Element = document.querySelector('div.file div.data table').cloneNode(false) as Element;

如何获取克隆元素的 outerHTML？

How do I get the outerHTML of a cloned element?

javascript

dom

element

typescript

reactjs