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

Javascript: J'ai la représentation DOM d'un nœud (élément ou document) et je cherche la représentation sous forme de chaîne de celui-ci. Par exemple,

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

devrait céder:

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

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

Vous pouvez créer un nœud 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>

EDIT: Veuillez voir la réponse ci-dessous à propos de externalHTML. el.outerHTML devrait être tout ce qui est nécessaire.

Ce que vous recherchez, c'est «externalHTML», 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: Obtenez le HTML externe de l'élément sélectionné

Je ne pense pas que vous ayez besoin d'un script compliqué pour cela. Juste utiliser

get_string=(el)=>el.outerHTML;

Sous FF, vous pouvez utiliser l' XMLSerializerobjet pour sérialiser XML en une chaîne. IE vous donne une xmlpropriété d'un nœud. Vous pouvez donc 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;
   }
}

Utilisez l'élément # externalHTML:

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

console.log(el.outerHTML);

Il peut également être utilisé pour écrire des éléments DOM. De la documentation de Mozilla:

L'attribut externalHTML de l'interface DOM d'élément obtient le fragment HTML sérialisé décrivant l'élément, y compris ses descendants. Il peut être défini pour remplacer l'élément par des nœuds analysés à partir de la chaîne donnée.

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

Utilisez element.outerHTML pour obtenir une représentation complète de l'élément, y compris les balises externes et les attributs.

Si votre élément a un parent

element.parentElement.innerHTML

Essayer

new XMLSerializer().serializeToString(element);

J'ai trouvé que pour mes cas d'utilisation, je ne veux pas toujours l'intégralité du HTML externe. De nombreux nœuds ont juste trop d'enfants à afficher.

Voici une fonction (testée au minimum dans 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

J'ai perdu beaucoup de temps à déterminer ce qui ne va pas lorsque j'itère dans DOMElements avec le code dans 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;
        },

si vous utilisez react:

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