使用jQuery将段落放到h2

Question

第一：我是jQuery的新手。我尝试使用jQuery将段落标记放入h2标记中。网站建立在CMS上，因此HTML由CMS生成。但我可以给你一些HTML代码和一个简短的jQuery代码，我之前尝试过：

HTML：

<div id="container">
    <h2>Title goes here</h2>
</div>

jQuery的：

$(document).ready(function(){
    $('#container').find('h1').replaceWith(function(){
        return '<h2>' + $(this).text() + '</h2>';
    });
    $('<p></p>').prependTo('h2');
});

jQuery代码使用我的HTML代码执行此操作（这不是太糟糕，只需要优化）：

<div id="container">
    <h2>
    <p></p>
    Title goes here
    </h2>
</div>

我现在的问题是，我希望将“标题转到此处”放入p标记。有没有jQuery函数来做到这一点，还是我完全错了？我已经看过jQuery API Documentation，但我找不到任何可以帮助我的东西。有什么建议吗？

干杯

PS：这是一个小提琴： Demo

Answer 1

这非常简单：您使用h2选择contents的内容，然后将其全部包含在p wrapAll中。您可以将其与replaceWith的函数语法结合使用，以便在一行中完成此操作。

$('h1').replaceWith(function(this) {
    return $(this).contents().wrapAll('<h2/>').wrapAll('<p/>').closest('h2');
});

更好的问题是为什么你想要这样做。 h2个元素可能不包含p元素。

Updated fiddle.

Answer 2

您正在尝试的是无效 HTML，因此，将标记附加到字符串将无法正常工作，因为浏览器会以有效的方式解析这些标记，因此会关闭{{1标签，然后它将呈现p标记。

将以下代码粘贴到按直接输入验证标签上的here上，然后自行查看

h1

Answer 3

我认为你要找的是jquery clone（）。克隆所需的段落，然后将其附加到所需的dom元素。 http://api.jquery.com/clone/