Comment obtenir le code HTML d'un élément du DOM en javascript ?

Question

Imaginez que j'ai le HTML suivant :

<div><span><b>This is in bold</b></span></div>

Je veux obtenir le code HTML de la division, y compris la division elle-même. Element.innerHTML ne renvoie que :

<span>...</span>

Des idées ? Merci

Answer 1

Utilisez outerHTML :

var el = document.getElementById( 'foo' );
alert( el.outerHTML );

Answer 2

Dans le prolongement de la réponse de jldupont, vous pouvez créer un élément d'habillage à la volée :

var target = document.getElementById('myElement');
var wrap = document.createElement('div');
wrap.appendChild(target.cloneNode(true));
alert(wrap.innerHTML);

Je clone l'élément pour éviter de devoir le supprimer et le réinsérer dans le document réel. Cela peut cependant s'avérer coûteux si l'élément que vous souhaitez imprimer possède une très grande arborescence en dessous de lui.

Answer 3

D'abord, mettez un élément qui enveloppe le div en question, mettez un id sur l'élément, puis utiliser l'attribut getElementById une fois que vous avez lement, il suffit de faire 'e.innerHTML' pour récupérer le HTML.

<div><span><b>This is in bold</b></span></div>

\=> <div id="wrap"><div><span><b>This is in bold</b></span></div></div>

et ensuite :

var e=document.getElementById("wrap");
var content=e.innerHTML;

Note que outerHTML n'est pas compatible avec les navigateurs.

Answer 4

Vous aurez besoin de quelque chose comme ça pour qu'il soit compatible avec tous les navigateurs.

function OuterHTML(element) {
    var container = document.createElement("div");
    container.appendChild(element.cloneNode(true));

    return container.innerHTML;
}

Answer 5

Comme outerHTML est uniquement IE, utilisez cette fonction :

function getOuterHtml(node) {
    var parent = node.parentNode;
    var element = document.createElement(parent.tagName);
    element.appendChild(node);
    var html = element.innerHTML;
    parent.appendChild(node);
    return html;
}

crée un faux élément vide du type parent et utilise innerHTML sur celui-ci, puis rattache l'élément au dom normal