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.
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.
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é
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;
}
}
Je ne pense pas que vous ayez besoin d'un script compliqué pour cela. Juste utiliser
get_string=(el)=>el.outerHTML;
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
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
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
Essayer
new XMLSerializer().serializeToString(element);
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;
},