如何获得克隆元素的externalHTML？

Question

I'm trying to avoid jQuery, simply needing to clone an element, eg

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

Later, I need to

return table.outerHTML;

but I'm getting the error

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

Which, makes sense. Only Element s have outerHTML .

What am I supposed to do here?

• Somehow cast Node to Element since I know it's definitely an Element ?
• Find some other way to clone the element (without children), but as an element?

• Or, am I doing something wrong further upstream? Maybe I don't need to use outerHTML at all? I thought I needed the outerHTML in React for dangerouslySetInnerHTML ing:

   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

Don't specify the datatype, Just use 'any'

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

Or

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

Answer 2

What about saving the outerHTML directly ?

    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 } } />;
        }
    }

or you can cast cloneNode :

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