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

Imaginez que j'ai le code HTML suivant:

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

Je veux obtenir le HTML pour le div, y compris le div lui-même. Element.innerHTML renvoie uniquement:

<span>...</span>

Des idées? Merci

En développant la réponse de jldupont, vous pouvez créer un élément d'emballage à la volée:

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

Je cloné l'élément pour éviter d'avoir à supprimer et réinsérer l'élément dans le document réel. Cela peut être coûteux si l'élément que vous souhaitez imprimer a un très grand arbre en dessous, cependant.

Utilisez outerHTML:

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

Tout d'abord, mettez l'élément qui encapsule l'élément diven question, mettez un idattribut sur l'élément et utilisez- getElementByIdle ensuite: une fois que vous avez l'élément, faites simplement '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>

puis:

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

Notez que ce outerHTMLn'est pas compatible avec plusieurs navigateurs.

Si vous voulez une empreinte plus légère, mais un script plus, obtenir les éléments innerHTML et seulement créer et cloner le vide parent-

function getHTML(who,lines){
    if(!who || !who.tagName) return '';

    var txt, ax, str, el= document.createElement('div');
    el.appendChild(who.cloneNode(false));
    txt= el.innerHTML;
    ax= txt.indexOf('>')+1;
    str= txt.substring(0, ax)+who.innerHTML+ txt.substring(ax);

    el= null;
    return lines? str.replace(/> *</g,'>\n<'): str;
    //easier to read if elements are separated
}

var x = $('#container').get(0).outerHTML;

comme externalHTML est IE uniquement, 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 élément vide bidon du type parent et utilise innerHTML dessus, puis rattache l'élément dans le dom normal

Vous voudrez quelque chose comme ça pour que ce soit un navigateur croisé.

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

    return container.innerHTML;
}

vieille question mais pour les nouveaux arrivants:

document.querySelector('div').outerHTML

définir la fonction externalHTML en fonction du support de element.outerHTML:

var temp_container = document.createElement("div"); // empty div not added to DOM
if (temp_container.outerHTML){
    var outerHTML = function(el){return el.outerHTML||el.nodeValue} // e.g. textnodes do not have outerHTML
  } else { // when .outerHTML is not supported
    var outerHTML = function(el){
      var clone = el.cloneNode(true);
      temp_container.appendChild(clone);
      outerhtml = temp_container.innerHTML;
      temp_container.removeChild(clone);
      return outerhtml;
    };
  };

var el = document.getElementById('foo');
el.parentNode.innerHTML;