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 );

这当然可以在一行中完成，但这使它更加清晰。