DOMノードの文字列表現を取得する

Javascript：ノード（要素またはドキュメント）のDOM表現があり、その文字列表現を探しています。例えば、

var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));

収まるはずです：

get_string(el) == "<p>Test</p>";

単純なものは見当たらないという強い気持ちがありますが、IE、FF、Safari、Operaで機能するメソッドが見つかりません。したがって、outerHTMLはオプションではありません。

一時的な親ノードを作成して、そのinnerHTMLコンテンツを取得できます。

var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));

var tmp = document.createElement("div");
tmp.appendChild(el);
console.log(tmp.innerHTML); // <p>Test</p>

編集： outerHTMLについては、以下の回答を参照してください。el.outerHTMLが必要なすべてのはずです。

あなたが探しているのは「outerHTML」ですが、古いブラウザと互換性のない代替cozが必要です。

var getString = (function() {
  var DIV = document.createElement("div");

  if ('outerHTML' in DIV)
    return function(node) {
      return node.outerHTML;
    };

  return function(node) {
    var div = DIV.cloneNode();
    div.appendChild(node.cloneNode(true));
    return div.innerHTML;
  };

})();

// getString(el) == "<p>Test</p>"

私のjQueryプラグインはここにあります：選択した要素の外部HTMLを取得します

これには複雑なスクリプトは必要ないと思います。使うだけ

get_string=(el)=>el.outerHTML;

FFでは、XMLSerializerオブジェクトを使用してXMLを文字列にシリアル化できます。IEはxmlノードのプロパティを提供します。したがって、次のことができます。

function xml2string(node) {
   if (typeof(XMLSerializer) !== 'undefined') {
      var serializer = new XMLSerializer();
      return serializer.serializeToString(node);
   } else if (node.xml) {
      return node.xml;
   }
}

Element＃outerHTMLを使用：

var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));

console.log(el.outerHTML);

また、DOM要素の記述にも使用できます。Mozillaのドキュメントから：

要素のDOMインターフェースのouterHTML属性は、その子孫を含む要素を記述するシリアル化されたHTMLフラグメントを取得します。要素を指定された文字列から解析されたノードで置き換えるように設定できます。

https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML

element.outerHTMLを使用して、外部タグや属性を含む要素の完全な表現を取得します。

要素に親がある場合

element.parentElement.innerHTML

試す

new XMLSerializer().serializeToString(element);

私のユースケースでは、outerHTML全体が常に必要なわけではないことがわかりました。多くのノードには、表示するには子が多すぎます。

ここに関数があります（最低でもChromeでテストされています）：

/**
 * Stringifies a DOM node.
 * @param {Object} el - A DOM node.
 * @param {Number} truncate - How much to truncate innerHTML of element.
 * @returns {String} - A stringified node with attributes
 *                     retained.
 */
function stringifyEl(el, truncate) {
    var truncateLen = truncate || 50;
    var outerHTML = el.outerHTML;
    var ret = outerHTML;
    ret = ret.substring(0, truncateLen);

    // If we've truncated, add an elipsis.
    if (outerHTML.length > truncateLen) {
      ret += "...";
    }
    return ret;
}

https://gist.github.com/kahunacohen/467f5cc259b5d4a85eb201518dcb15ec

受け入れられた回答のコードを使用してDOMElementsを反復処理するときに何が問題であるかを理解するのに多くの時間を費やしました。これは私にとってうまくいったものであり、そうでなければ、1つおきの要素がドキュメントから消えます：

_getGpxString: function(node) {
          clone = node.cloneNode(true);
          var tmp = document.createElement("div");
          tmp.appendChild(clone);
          return tmp.innerHTML;
        },

反応を使用する場合：

const html = ReactDOM.findDOMNode(document.getElementsByTagName('html')[0]).outerHTML;