jquery - Jquery h1タグ内にdivを追加

Question

jqueryを使用して、すべてのh1タグ内のテキストをdivクラスでラップするにはどうすればよいですか. たとえば、すべてを作る

<h1> test </h1>

ドキュメントで

<h1> <div class="wrap">test </div></h1>.

私はメンタルブロックを抱えています。どんな助けでも大歓迎です。

Answer 1

使ってみて$('h1').wrapInner('<div class="wrap" />');

しかし、<span class="wrap" />

デモ jsBin

ドキュメントから: http://api.jquery.com/wrapInner/

Answer 2

<div>の内部では無効です<h1>。を使用したほうがよいでしょう<span>。純粋な JavaScript:

var h = document.getElementsByTagName('h1')[0],
    d = document.createElement('span');
while(h.firstChild) d.appendChild(h.firstChild);
h.appendChild(d);
d.className = "wrap";

しかし、そうは言っても、「ラップ」クラスをに適用することはできません<h1>か?

Answer 3

// Get and wrap the content from the h1
var content = $('h1').html();
content = '<div class="wrap">' + content + '</div>';

// Reinsert the content into the h1
$('h1').html( content );

もちろん、これは 1 行で実行できますが、これにより、もう少し明確になりました。