jQuery récupère le code HTML du conteneur, y compris le conteneur lui-même

Comment obtenir le code HTML sur '#container', y compris '#container' et pas seulement 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/

Si vous enveloppez le conteneur dans une Pbalise factice, vous obtiendrez également le code HTML du conteneur.

Tout ce que tu as à faire c'est

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

Vérifiez l'exemple de travail sur http://jsfiddle.net/rzfPP/68/

Pour unwrap()l' <p>étiquette lorsque vous avez terminé, vous pouvez ajouter

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

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

MISE À JOUR : Ceci est maintenant pris en charge par Firefox à partir de FireFox 11 (mars 2012)

Comme d'autres l'ont souligné, cela ne fonctionnera pas dans FireFox. Si vous en avez besoin pour fonctionner dans FireFox, vous voudrez peut-être jeter un coup d'œil à la réponse à cette question: dans jQuery, existe-t-il une fonction similaire à html () ou text () mais qui renvoie tout le contenu du composant correspondant?

J'aime utiliser ceci;

$('#container').prop('outerHTML');

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

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

Mise à jour: externalHTML fonctionne maintenant sur Firefox, alors utilisez l'autre réponse à moins que vous n'ayez besoin de prendre en charge de très anciennes versions de Firefox

Oldie mais goldie ...

Puisque l'utilisateur demande jQuery, je vais rester simple:

var html = $('#container').clone();
console.log(html);

Violon ici.

$.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;
    }
};

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

Firefox ne prend pas en charge externalHTML , vous devez donc définir une fonction pour aider à le prendre en charge:

function outerHTML(node) {
    return node.outerHTML || (
        function(n) {
            var div = document.createElement('div');
            div.appendChild( n.cloneNode(true) );
            var h = div.innerHTML;
            div = null;
            return h;
        }
    )(node);
}

Ensuite, vous pouvez utiliser externalHTML:

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

var x = $($('div').html($('#container').clone())).html();

Solution simple avec un exemple:

<div id="id_div">
  <p>content<p>
</div>

Déplacez ce DIV vers un autre DIV avec id = "other_div_id"

$('#other_div_id').prepend( $('#id_div') );

terminer