質問: 現在HTMLとjQueryでプログラムを組んでいます。 仕様としては、ボタン押下時にHTMLコンテンツを取得するというものです。 .html()を使ってそれを実現しようとしています。 質問があるのですが、 結論から言うと **.html()を使って自要素も含めたHTMLコンテンツの取得するにはどうしたらいいでしょうか?** ※別に.html()にこだわってはいなくて、HTMLコンテンツが取れればいいです。 .html()でHTMLコンテンツを取ってこようとすると、要素配下のHTMLコンテンツを取ってきてしまいます。 そのためそれぞれ別々にHTMLコンテンツを取ってきたいのにうまく取ってくることができません。 具体的に実現したいことは以下です。 ``` トマト キャベツ もやし てすとぼたん ``` もしわかる方がいらっしゃればよろしくお願い致します。
回答: jQueryオブジェクトに`outerHTML`を使いたい場合はちょっと一捻りするだけです。 ``` $('button').on('click',function(){ var firstHTML = $('.a')[0].outerHTML; var secondHTML = $('.b')[0].outerHTML; var thirdHTML = $('.c')[0].outerHTML; console.log(firstHTML); // "トマト" console.log(secondHTML); // "キャベツ" console.log(thirdHTML); // "もやし" }); ``` 多用する場合はjQuery関数化してしまってもいいでしょう。 ``` // 「outerHtml」の部分は何でもいいです $.fn.outerHtml = function(){ return $(this)[0].outerHTML; }; var firstHTML = $('.a').outerHtml(); console.log(firstHTML); // "トマト" ```