javascript - 如何获取克隆元素的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 来进行 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

直接保存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;