javascript - 是否可以在父元素中找到文本并将其包装起来？

Question

我有一段代码看起来像这样:

<div class="breadcrumbs">
    <a href="#">Root element</a>
    <a href="#">Blog</a>
    Page 2
</div>

我想做的是，我不确定是否可以使用 jQuery 将上面的片段转换为以下片段:

<div class="breadcrumbs">
    <a href="#">Root element</a>
    <a href="#">Blog</a>
    <span class="paginationSection">Page 2</span>
</div>

有没有办法用 jQuery 实现它？

更新 #1

这是我为自己工作而编写的代码。我将代码放在这里只是为了帮助其他人使用该功能。

// Get the breadcrumb element
var t = document.getElementsByClassName('breadcrumbs');
// Assign the breadcrumb element into t variable
var t = t[0];
// Get the text of the last node in the breadcrumb element
var currentText = t.childNodes[t.childNodes.length - 1].nodeValue;

// If currentText it is not empty
if($.trim(currentText) != '')
{
    // Create a new span element
    var span = document.createElement('span');
    // Set the class I need
    span.className = 'pagination';
    // Set the text to currentText
    span.innerHTML = currentText;
    // Empty the last node value
    t.childNodes[t.childNodes.length - 1].nodeValue = '';
    // Append the span on .breadcrumb element.
    t.appendChild(span);
}

最后，我要感谢大家参与这个问题:)

Answer 1

试试这个:

$('.breadcrumbs').text().wrap('<span class="paginationSection" />');

更新:

试试这个:

fiddle

$('.breadcrumbs').text(function(index,text){return this.text}).wrap('<span class="paginationSection" />');

更新2:

这是根据您的问题要求解决实际问题的最佳方法:demo

$('.breadcrumbs').contents()
.filter(function(){
return this.nodeType !== 1;
}).wrap('<span class="paginationSection" />');