jQuery 在 h1 标签内添加 div

Question

使用jQuery，如何在所有h1标签内部的文本周围包装一个div类。例如，将文档中的所有

测试

变成

测试

。我遇到了瓶颈，请给予帮助，谢谢！

- Hue

---

建议使用 <span> 标签包裹，而不是使用 <div> 标签。 - Roko C. Buljan

我正在尝试使用jQuery，将一个div标签包裹在h1标签中，以围绕文本内容。 - Hue

Answer 1

<h1>标签内不能使用<div>元素。建议使用<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";

但是话说回来，你不能只是将 "wrap" 类应用于 <h1> 吗？

- Niet the Dark Absol

Answer 2

试着使用$('h1').wrapInner('<div class="wrap" />');

但是要使用<span class="wrap" />

演示 jsBin

来自文档：http://api.jquery.com/wrapInner/

- Roko C. Buljan

---

太棒了，你说得对，我会使用<span>标签。感谢大家的帮助！ - Hue

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

当然，这可以在一行代码中完成，但这样写更加清晰明了。

- Ben Roux