web-dev-qa-db-fra.com

Comment obtenir le code 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 code HTML pour la div, y compris la div elle-même. Element.innerHTML ne renvoie que:

<span>...</span>

Des idées? Merci

javascripthtmldom
85
Richard H

En développant 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 d'avoir à retirer 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.

79
Jørn Schou-Rode

Utilisez outerHTML:

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

Tout d’abord, mettez l’élément qui enveloppe le div en question, placez un attribut id sur l’élément, puis utilisez getElementById: une fois que vous avez le lement, Faites 'e.innerHTML` pour récupérer le code 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 alors:

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

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

8
jldupont

Si vous voulez une empreinte plus légère, mais un script plus long, récupérez les éléments innerHTML et ne créez et clonez que 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
}
3
kennebec
var x = $('#container').get(0).outerHTML;
3
Pawan Jasoria

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;
}
2
Nikolas Stephan

outerHTML est IE seulement, 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 dessus, puis rattache l'élément dans le dom normal

1
Zenon

vieille question mais pour les nouveaux arrivants qui viennent autour:

document.querySelector('div').outerHTML

0
pery mimon

définir la fonction outerHTML sur la base 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;
    };
  };
0
Remi