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

Imaginer, 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. De l'élément.innerHTML ne retourne:

<span>...</span>

Des idées? Grâce

InformationsquelleAutor Richard H | 2009-11-19

82

Expansion sur jldupont de réponse, 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 suis le clonage de l'élément pour éviter d'avoir à retirer et réinsérer l'élément dans le document. Cela peut être coûteux si l'élément que vous souhaitez imprimer un arbre de très grande taille en dessous de lui, si.
- hi - bilan, c'est probablement ma meilleure option. un peu méfiant de détachement/fixer les éléments, je ne peux pas visser les DOM, et je ne pense pas qu'il y à de grands arbres.
- À moins que myElement est un élément qui ne peut pas être un enfant d'une div, comme un li, ligne de tableau ou une cellule de tableau et ainsi de suite.
- Maintenant que c'est 2013, en appelant "domnode.outerHTML" fonctionne sur tous les principaux navigateurs (FF depuis la v11)
InformationsquelleAutor Jørn Schou-Rode
83

Utilisation outerHTML:
```
var el = document.getElementById( 'foo' );
alert( el.outerHTML );
```
- Non, c'est une IE extension. Bien qu'il existe Firefox solutions: snipplr.com/view/5460/outerhtml-in-firefox
- c'est certainement ce que j'ai besoin.. bien que, apparemment, est un IE extension. Suis dans une WebKit environnement - test maintenant. merci
- Les navigateurs basés sur WebKit semblent le soutenir, mais Firefox ne fonctionne pas.
- Selon quirksmode.org/dom/w3c_html.html il devrait fonctionner sous IE, Opera, Safari et Chrome.
- mon webkit mise en œuvre de outerHTML semble juste retour de la chaîne de contenu, et pas en html. innerHTML fonctionne comme prévu.
- Notez que outerHTML est partie de HTML5, et devrait donc être pris en charge par tout le monde dans le temps.
- outerHTML est pris en charge depuis FF11: developer.mozilla.org/en-US/docs/Web/API/element.outerHTML.
- Firefox prend en charge ce à partir de la version 11
InformationsquelleAutor Majkel
8

D'abord, mettre sur un élément qui enveloppe le div en question, mettre un id l'attribut de l'élément et ensuite utiliser getElementById sur elle: une fois que vous avez la lement, il suffit de faire '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 puis:
```
var e=document.getElementById("wrap");
var content=e.innerHTML;
```
Note que outerHTML n'est pas compatible avec tous les navigateurs.
- le problème avec l'obtention de la innerHTML pour le div parent, c'est que je vais vous bénéficiez également de innerHTML pour les frères et sœurs de la div
- My bad, je pensais que le "mettre un attribut id de l'élément" se réfère à la "élément". Avec votre dernière modification il est beaucoup plus claire que vous souhaitez ajouter un supplément de div à la soupe 🙂
- si l'élément n'est pas dans le document... alors où est-il, avez-vous soin de nous éclairer tous?
- bien sûr, vous pouvez créer des éléments où vous voulez, mais c'est n la raison d'un vote... vous ne ferez pas beaucoup d'amis ici avec ce genre d'attitude.
- Assez sûr outerHTML a été de la croix-navigateur compatible pour un long, long temps n'a pas peur de l'utiliser.
InformationsquelleAutor jldupont

Si vous voulez un briquet empreinte, mais plus de script, d'obtenir les éléments innerHTML et seulement de 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
}

InformationsquelleAutor kennebec

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

InformationsquelleAutor Pawan Jasoria

2

Vous aurez envie de quelque chose de ce genre pour qu'il soit de la croix-navigateur.
```
function OuterHTML(element) {
    var container = document.createElement("div");
    container.appendChild(element.cloneNode(true));

    return container.innerHTML;
}
```
- Cela permettrait de lever element à partir du document lorsqu'il est appelé, à droite?
- Il serait, ont fixé que maintenant, en ajoutant cloneNode, ce qui le rend quasiment identiques à ceux de certains autres réponses ici.
InformationsquelleAutor Nikolas Stephan

comme outerHTML est IE seulement, l'utilisation de 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 bidon vide de l'élément de type parent et utilise innerHTML sur elle et puis replace l'élément retour à la normale dom

InformationsquelleAutor Zenon

définir la fonction outerHTML fondée sur le soutien à l'élément.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;
    };
  };

InformationsquelleAutor Remi

0

une vieille question, mais pour les nouveaux arrivants qui viennent autour de :

document.querySelector('div').outerHTML

InformationsquelleAutor pery mimon
-2
```
var el = document.getElementById('foo');
el.parentNode.innerHTML;
```
- cela va aussi me donner le code html pour la div frères et sœurs bien droit?
- C'est quoi le bas de vote? La question d'origine n'avait rien à voir avec les frères et sœurs. Cette réponse est parfaitement valable réponse donnée le contexte original de la question.
- D'autre part, la question d'origine n'avait rien à voir avec un parent. Donc, quel que soit.
InformationsquelleAutor Jason Leveille

Vous devez vous connecter pour publier un commentaire.