jQuery obtenir le HTML du conteneur, y compris le conteneur lui-même

Question

Comment puis-je obtenir le code HTML sur '#container', y compris '#container' et pas seulement sur ce qu'il contient?

 <div id="container">
 <div id="one">test 1 </div>
 <div id="two">test 2 </div>
 <div id="three">test 3 </div>
 <div id="four">test 4 </div>
</div>
 

J'ai ceci qui obtient le HTML dans #container. il n'inclut pas l'élément #container lui-même. C'est ce que je cherche à faire

 var x = $('#container').html();
$('#save').val(x);
 

Vérifiez http://jsfiddle.net/rzfPP/58/

Answer 1

Si vous enveloppez le conteneur dans une balise factice P vous obtiendrez également le code HTML du conteneur.

Tout ce que vous devez faire c'est

 var x = $('#container').wrap('<p/>').parent().html();
 

Consultez l'exemple de travail sur http://jsfiddle.net/rzfPP/68/

Pour unwrap() le tag <p> lorsque vous avez terminé, vous pouvez ajouter

 $('#container').unwrap();
 

Answer 2

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

Mise à JOUR : il est maintenant pris en charge par Firefox de FireFox 11 (Mars 2012)

Comme d'autres l'ont souligné, cela ne fonctionne pas dans FireFox. Si vous en avez besoin pour travailler dans FireFox, alors vous voudrez peut-être jeter un oeil à la réponse à cette question : En jQuery, il y a aucune fonction similaire à html() ou texte (), mais de retour de l'ensemble du contenu de correspondance composant?

Answer 3

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

Answer 4

$('#container').clone().wrapAll("<div/>").parent().html();

Answer 5

 $.fn.outerHtml = function()
{
if (this.length)
{
    var div = $('<div style="display:none"></div>');
    var clone =
    $(this[0].cloneNode(false)).html(this.html()).appendTo(div);
    var outer = div.html();
    div.remove();
    return outer;
}
else
    return null;
};
 

de http://forum.jquery.com/topic/jquery-getting-html-and-the-container-element-12-1-2010