jQueryで、作成した要素自身のHTMLを取得する方法

Question

jQueryで、作成した要素自身のHTMLを取得する方法を教えてください。

例えばこのように要素を作成して、

var $a = $("<a>").text("寺尾").prop("href", "https://teratail.com").wrapInner("<b>");
console.log($a.html());

<a href="https://teratail.com"><b>寺尾</b></a>

こういう文字列を得たいと思っています。はい、文字列を得たいのです。
しかし上記を実行すると、以下の結果になります。

<b>寺尾</b>

一応、以下のようにダミーの親要素を作成してその下に作成すれば期待する結果は得られました。

var $div = $("<div>").append($a);
console.log($div.html());

ただ、できれば不要な要素は作りたくないと思っています。それに自身のHTMLを取得する機能くらいあってもいいのではないかと思っています。ただ、リファレンスをざっと見たのですが見つかりませんでした。

• jQueryで要素自身のHTMLを取得する方法はありますか？
• 無い場合、代替方法としてダミーの親要素を作成する方法以外にいい方法はありますか？

この点について教えてください。
よろしくお願いします。

※方法がない場合には「ない」という回答をしていただけたらあきらめがつきますのでありがたいです。

Answer 1

DOMに.outerHTMLがありますので、それを使いましょう（MDN）。$a[0]としているのは、「jQueryオブジェクトの中から、0番目（先頭）のDOM要素を得る」という意味です。

var $a = $("<a>").text("寺尾").prop("href", "https://teratail.com").wrapInner("<b>");
console.log($a[0].outerHTML);

Comments

[miu_ras]

そう。「outerHTMLみたいなのないかな、それくらいあるだろ」と思って質問をしました。でもjQueryのメソッドには無いという事なんですかね。

そうか。ないなら取り出してしまえばいいのですね。なるほど。そういう使い方をあまりしたことがなかったので思いつきませんでした。ブラウザの対応的にも、現在なら問題なさそうですしね。

参考になりました。ありがとうございました

Answer 2

maisumakunさんの回答で問題ないかとは思いますが
せっかくなのでpropから参照したほうがよいかもしれません

 console.log($("<a>").text("寺尾").attr("href", "https://teratail.com").wrapInner("<b>").prop('outerHTML'));

hrefはpropよりattrのような気がします（自信なし）

Comments

[miu_ras]

おお。これなら、DOMを取り出さずにjQueryの世界だけで完結していますね。面白いですね。

参考になりました。ありがとうございました

※hrefは確かに、attrの方が自然な気がしますね。