javascript - jqueryの要素とともに要素のhtmlを返す

Question

私は次のようにマークアップしています

<div id="div1">
   <div id="div2">
     blah blah
   </div>
</div>

$("#div1").html() を使用すると、div#div2 が返されます。しかし、完全なhtmlを取得したいです。つまり、div#div1 とともに。

これを行う方法はありますか？

Answer 1

あなたは試すことができます：

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

編集：

同じソリューションですが、jQuery を使用しません (パフォーマンスが向上します):

document.getElementById('div1').outerHTML

Answer 2

.parent() を使用します。

$("#div1").parent().html();

ただし、これはすべての兄弟の html も取得します。div1 を別の div でラップすることができます... :)

Answer 3

.html()innerHTMLouterHTML が必要であることを返します。これは役に立ちます。

Answer 4

親要素を選択しようとするか、他の方法はこれを行うことです：

var html = $('<div>').append($('#top').clone()).remove().html();

Answer 5

.outerHTMLネイティブプロパティが存在する場合はそれを使用し、存在しない場合はポリフィルを使用できるようにする単純な jQuery プラグインを作成できます。

(function($) {
  if('outerHTML' in document.createElement('div')) {
    $.fn.outerHtml = function() {
      return this[0].outerHTML;
    }
  }
  else {
    $.fn.outerHtml = function() {
      return $("<div />").append(this.eq(0).clone()).html();
    }
  }
}(jQuery));

例はhttp://jsfiddle.net/steveukx/qUEyp/にあります

Answer 6

これを試してください：http://jsfiddle.net/96u9c/3/

:)特別なニーズ機能、今あなたはあなた自身のあらゆる目的のためにそれを使うことができます.

justtextinnerバージョンとして子テキストを取得する親タグの唯一のテキストを取得します。

それが役に立てば幸い:)

これをプロジェクトの一般的な javascript ファイルに追加するか、カスタマイズしてプロジェクトのプラグインとして使用することができます。

コード

jQuery.fn.justtext = function() {

    return $(this).clone()
            .children()
            .remove()
            .end()
            .text();

};

jQuery.fn.justtextinner = function() {

    return $(this).clone()
            .children()
            .end()
            .text();

};

alert($('#div1').justtextinner());​

Answer 7

$("<div />").append($("#div1").clone()).html();

フィドル