How to wrap HTML around a text node with jQuery?

Question

<div class="pagination">
  <a href="#">1</a>
  <a href="#">2</a>
  3
  <a href="#">4</a>
</div>

I need to use jQuery to wrap an HTML element around the number "3". I can't modify the HTML because it is dynamically generated.

I think that will be useful: stackoverflow.com/questions/8568657/wrap-stray-text-in-divs — devnull69
– devnull69, Commented Apr 4, 2012 at 6:18

Community · Accepted Answer · 2017-05-23 12:25:06Z

15

I had a similar question which wraps all stray text

$(function() {

    var test = $('.pagination')
        .contents()
        .filter(function() {
            return this.nodeType === 3 && $.trim(this.nodeValue) !== '';
        })
        .wrap('<span/>');

});

just had a minor confusion with wrap() and wrapAll(). here's a demo

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Apr 4, 2012 at 6:30

Joseph

120k31 gold badges186 silver badges238 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Royi Namir Over a year ago

it changed the order of the elements jsbin.com/uvigam/edit#javascript,html

Joseph Over a year ago

it's now updated. this time, i have a demo. i got confused with wrap() and wrapAll().

amd · Accepted Answer · 2012-04-09 06:57:20Z

4

this will wrap all your number with a span, so the structure will be :

<a><span>1</span></a>

and the selected one only span without a :

<span>2</span>


var html = $('.pagination').html();
    html = html.replace(/[0-9]/g,"<span>$&</span>");
    $('.pagination').html(html);

so you can easily style it with :

.pagination a span {normal style} 
.pagination span{selected style}

edited Apr 9, 2012 at 6:57

answered Apr 4, 2012 at 7:02

amd

21.7k6 gold badges54 silver badges71 bronze badges

2 Comments

11684 Over a year ago

@user560756 or you won't be notified.

Imran Bughio Over a year ago

why not simply $('.pagination').html('<span>'+$('.pagination').html()+'</span>');

1252748 · Accepted Answer · 2015-05-13 15:45:49Z

2

This is old, but a shorter, simpler way to do this in my opinion would be:

$("div:not(a)").wrapInner("<a href='#'></a>");

answered May 13, 2015 at 15:45

1252748

15.5k35 gold badges118 silver badges244 bronze badges

Collectives™ on Stack Overflow

How to wrap HTML around a text node with jQuery?

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related