Obtenir la représentation sous forme de chaîne d'un nœud DOM

Question

Javascript: j'ai la représentation DOM d'un noeud (élément ou document) et je recherche la représentation sous forme de chaîne. Par exemple,

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

devrait donner:

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

J'ai le fort sentiment que je manque quelque chose de trivialement simple, mais je ne trouve pas de méthode qui fonctionne dans IE, FF, Safari et Opera. Par conséquent, outerHTML n'est pas une option.

Answer 1

Vous pouvez créer un noeud parent temporaire et en obtenir le contenu 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>
 

Answer 2

Ce que vous recherchez, c'est 'outerHTML', mais nous avons besoin d'une solution de secours, car elle n'est pas compatible avec les anciens navigateurs.

 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>"
 

Vous trouverez mon plugin jQuery ici: Obtenir le code HTML externe de l'élément sélectionné

Answer 3

Sous FF, vous pouvez utiliser l'objet XMLSerializer pour sérialiser XML en chaîne. Internet Explorer vous donne la propriété xml d'un nœud. Donc, vous pouvez faire ce qui suit:

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

Answer 4

J'ai perdu beaucoup de temps à comprendre ce qui ne va pas lorsque je parcoure DOMElements avec le code de la réponse acceptée. C'est ce qui a fonctionné pour moi, sinon chaque deuxième élément disparaît du document:

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