web-dev-qa-db-fra.com

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

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.

javascriptstringdomcross-browserelement
75
Boldewyn

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 consulter la réponse ci-dessous à propos de outerHTML. el.outerHTML devrait être tout ce qui est nécessaire.

109
CMS

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é

37
gtournie

Sous FF, vous pouvez utiliser l'objet XMLSerializer pour sérialiser XML en chaîne. IE 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;
   }
}
15
Bryan Kyle

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

get_string=(el)=>el.outerHTML;
12
Shishir Arora

Utilisez l'élément # outerHTML:

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 outerHTML de l'interface DOM de l'élément récupère le fragment HTML sérialisé décrivant l'élément, y compris ses descendants. Il peut être configuré 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

6
Rich Apodaca

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

3
Pavel V.

Si votre élément a un parent

element.parentElement.innerHTML
1
Vincnetas

J'ai constaté que, dans mes cas d'utilisation, je ne voulais pas toujours la totalité du HTML externe. Beaucoup de nœuds ont juste trop d'enfants à montrer.

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

0
Aaron

Essayer 

new XMLSerializer().serializeToString(element);
0
Alex Popa

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;
        },
0
balagan