将div转换为h2 span jQuery

Question

我有一个带有生成标题动态标题

的div

<div class="title">dynamic content</div>

我想改变它：

<h2 class="title"><span>dynamic content</span></h2>

这在jQuery中是否可行？

Answer 1

这应该这样做。

$('div.title').replaceWith(function() { 
    return $('<h2>').addClass('title').append($('<span>').text($(this).text()));
});

http://jsfiddle.net/uPFUu/

Answer 2

当然！

$('.title').replaceWith('<h2 class="title"><span>'+$('.title').html()+'</span></h2>');

Answer 3

$('div.title').each(function () {
    $(this).replaceWith($('<h2>').append($('<span>').append($(this).children().remove())))
})

请注意我的字符串'<h2>'和'<span>'。只因为它们是简单的标签，我可以安全地省略结束标签。为了获得你的课程，你需要一个

$('div.title').each(function () {
    $(this).replaceWith($('<h2>').addClass('title').append($('<span>').append($(this).children().remove())))
})

或

$('div.title').each(function () {
    $(this).replaceWith($('<h2 class="title"></h2>').append($('<span>').append($(this).children().remove())))
})

请参阅jQuery: Risk of not closing tags in constructors

Answer 4

$('.title').html('<span>' + $('.title').html() + '</span>');