javascript - 内側の html だけでなく完全な html を取得する

Question

HTMLを取得するために使用しているセレクターを含むHTMLを取得したい

私が持っているとしましょう

<div id="foo">
  <div id="bar">content</div>
</div>

私がするとき、私は$('#foo').html()得る

<div id="bar">content</div>

親（セレクターdiv）を含むhtml全体を取得するjqueryの方法はありますか

このhtml全体が欲しい

<div id="foo">
  <div id="bar">content</div>
</div>

Answer 1

できるよ：

$('#foo')[0].outerHTML;

デモ

より詳しい情報：

https://developer.mozilla.org/en/DOM/element.outerHTML

Answer 2

.clone()と.wrap()likeでこれを行うこともできます

$('#foo').clone().wrap("<div/>").parent().html();

デモ: http://jsfiddle.net/joycse06/Vy5JW/

注意 outerHTMLはFirefoxではサポートされていません。< 11.0こちらのブラウザ互換性セクションで確認できますhttps://developer.mozilla.org/en/DOM/element.outerHTML

したがって、フェイルセーフのために、次のようなものを使用できます。これはouterHTML、利用可能な場合に利用し、ブラウザ間で機能します

$foo = $('#foo');
var outerHtml =   ('outerHTML' in $foo[0])? $foo[0].outerHTML 
                                  : $foo.clone().wrap("<div/>").parent().html(); 

更新されたデモ http://jsfiddle.net/joycse06/Vy5JW/1/

Answer 3

プロパティを使用できますouterHTML：

$('#foo')[0].outerHTML

Answer 4

Sarfrazの答えに加えて、jQueryを使用している場合は、それを独自のプラグインにパックできます。

(function($) {

    $.fn.outer = function() {

        return $(this)[0].outerHTML;

    };

})(jQuery);
​

これがデモです：http：//jsfiddle.net/WkH4z/

Answer 5

これを試して：

    $('#foo').parent().html();