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

Question

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

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

次の結果が得られます。

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

単純なものが欠けていると強く感じていますが、IE、FF、Safari、Opera で機能する方法が見つかりません。したがって、outerHTML はオプションではありません。

Answer 1

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

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が必要なすべてである必要があります。

Answer 2

探しているのは「outerHTML」ですが、古いブラウザと互換性がないため、フォールバックが必要です。

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 プラグインがあります: Get selected element's outer HTML

Answer 3

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

get_string=(el)=>el.outerHTML;

Answer 4

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

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

Answer 5

試す

new XMLSerializer().serializeToString(element);

Answer 6

If your element has parent

element.parentElement.innerHTML

Answer 7

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

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