jQueryは、コンテナー自体を含むコンテナーのhtmlを取得します

「#container」を含む「#container」のHTMLを取得するにはどうすればよいですか？

<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>

私はこれを#container内にHTMLを取得します。#container要素自体は含まれません。それが私がやろうとしていることです

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

http://jsfiddle.net/rzfPP/58/を確認してください

コンテナーをダミータグでラップPすると、コンテナーHTMLも取得されます。

あなたがする必要があるのは

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

http://jsfiddle.net/rzfPP/68/で実際の例を確認してください

タグを行って、あなたが追加することができますunwrap()<p>

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

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

更新：これは、FireFox 11（2012年3月）の時点でFirefoxによってサポートされています。

他の人が指摘したように、これはFireFoxでは機能しません。FireFoxで動作させる必要がある場合は、この質問への回答を確認することをお勧めします。jQueryには、 html（）またはtext（）に似ているが、一致するコンポーネントのコンテンツ全体を返す関数はありますか？

私はこれを使いたいです。

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

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

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

更新：outerHTMLがFirefoxで動作するようになりました。Firefoxの非常に古いバージョンをサポートする必要がない限り、他の回答を使用してください

Oldie but goldie ...

ユーザーがjQueryを要求しているので、私はそれをシンプルに保つつもりです：

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

ここでフィドル。

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

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

FirefoxはouterHTMLをサポートしていないため、サポートするための関数を定義する必要があります。

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);
}

次に、outerHTMLを使用できます。

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

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

例を使用した簡単なソリューション：

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

このDIVをid = "other_div_id"を持つ他のDIVに移動します

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

仕上げ