【jQuery】.html()を使って自要素も含めたHTMLコンテンツの取得方法が知りたい

Question

現在HTMLとjQueryでプログラムを組んでいます。
仕様としては、ボタン押下時にHTMLコンテンツを取得するというものです。
.html()を使ってそれを実現しようとしています。

質問があるのですが、
結論から言うと

.html()を使って自要素も含めたHTMLコンテンツの取得するにはどうしたらいいでしょうか？

※別に.html()にこだわってはいなくて、HTMLコンテンツが取れればいいです。

.html()でHTMLコンテンツを取ってこようとすると、要素配下のHTMLコンテンツを取ってきてしまいます。
そのためそれぞれ別々にHTMLコンテンツを取ってきたいのにうまく取ってくることができません。

具体的に実現したいことは以下です。

<ul id="hoge">
    <li class='a'><div>トマト</div></li>
    <li class='b'><div>キャベツ</div></li>
    <li class='c'><div>もやし</div></li>
</ul>
<button type="button">てすとぼたん</button>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$('button').on('click',function(){
  var firstHTML = $('.a').html();
  var secondHTML = $('.b').html();
  var thirdHTML = $('.c').html();
  console.log(firstHTML);  //<div>トマト</div>
  console.log(secondHTML); //<div>キャベツ</div>
  console.log(thirdHTML);  //<div>もやし</div>

  /*実際は以下のようにしたい。<li>タグも含めて、自要素も含めてとってきたい
    var firstHTML = "<li class='a'><div>トマト</div></li>";
    var secondHTML = "<li class='b'><div>キャベツ</div></li>"
    var thirdHTML = "<li class='c'><div>もやし</div></li>";
  */
});
</script>

もしわかる方がいらっしゃればよろしくお願い致します。

Answer 1

outerHTML の事でしょうか。

• Element.outerHTML - Web API インターフェイス | MDN

個人的にはシリアライズされたHTMLタグを使うよりも要素ノード単位で扱う方が確実だと思います。

Re: k499778 さん

Comments

[k499778]

回答有り難うございます！
idだといけました！
ただclassだとundifinedになってしまいます。私何か間違っているでしょうか？
もしおわかりでしたらお答えいただけると嬉しいです。

-----
<ul id="hoge">
<li class='a'><div>トマト</div></li>
<li class='b'><div>キャベツ</div></li>
<li id='c'><div>もやし</div></li>
</ul>
<button type="button">てすとぼたん</button>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$('button').on('click',function(){
　var a = document.getElementsByName("a");
　var b = document.getElementsByClassName("b");
　var c = document.getElementById("c");

console.log(a.outerHTML); //undifined
console.log(b.outerHTML); //undifined
console.log(c.outerHTML); //<li id="c"><div>もやし</div></li>

});
</script>

-----

[think49]

getElementsByClassName が返すのは HTMLCollection です。
index を指定しなければ、要素ノードを参照できません。

[k499778]

HTMLCollectionを返すからなのですね。
もう少し勉強してみます。
返答してくださりありがとうございます。

Answer 2

jQueryオブジェクトにouterHTMLを使いたい場合はちょっと一捻りするだけです。

$('button').on('click',function(){
  var firstHTML = $('.a')[0].outerHTML;
  var secondHTML = $('.b')[0].outerHTML;
  var thirdHTML = $('.c')[0].outerHTML;
  console.log(firstHTML); // "<li class='a'><div>トマト</div></li>"
  console.log(secondHTML); // "<li class='b'><div>キャベツ</div></li>"
  console.log(thirdHTML);  // "<li class='c'><div>もやし</div></li>"
});

多用する場合はjQuery関数化してしまってもいいでしょう。

// 「outerHtml」の部分は何でもいいです
$.fn.outerHtml = function(){
  return $(this)[0].outerHTML;
};

var firstHTML = $('.a').outerHtml();

console.log(firstHTML); // "<li class='a'><div>トマト</div></li>"

Comments

[k499778]

回答ありがとうございます。
実現したい処理を実装することができました。
感謝しています。

Answer 3

検証してないですけど、

var firstHTML = $('.a').parent().html();
var secondHTML = $('.b').parent().html();
var thirdHTML = $('.c').parent().html();

とかで、親要素取得できませんでしたっけ・・・？！
間違ってたらごめんなさい。

っと、parent()のドキュメントです。

https://api.jquery.com/parent/

Comments

[k499778]

回答有り難うございます。

実際にやってみたのですが、そうすると全部をとってきてしまいますね^^;

----
出力ログ。以下が３回

<li class="a"><div>トマト</div></li>
<li class="b"><div>キャベツ</div></li>
<li class="c"><div>もやし</div></li>

----

[ItoTomonori]

あ、そうですよね、、、そうなってしまいすよね、、、