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

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

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

最后，我要感谢大家参与这个问题：）

最佳答案

尝试这个：

$('.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" />');

关于javascript - 是否可以在父元素中找到文本并将其包装起来？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21134905/