Wrap a mixed set of text nodes and HTML elements with JavaScript / jQuery

Question

I have this HTML

<div class="box">
    <a href="#goals"> | <a href="#rules"> | <a href="#controls">
    <p><a name="goals"></a></p>
    <h2>Goals</h2>
    ... yada yada

and want it like this.

<div id="nav">
    <a href="#goals"> | <a href="#rules"> | <a href="#controls">
</div>

JQuery have wrapAll(), but I can only select the links so the "|" gets left outside the div.

before('div') and after('div') creates a closed element, like <div></div> so what to do?

I'm using

$('.box a[href^="#"]')

to select the links. They are part of a text resource file, so I cant edit anything.

he doesn't, but he needs to wrap some content and jQuery won't let you add the opening and closing tags separately. — Alnitak
– Alnitak, Commented Jan 26, 2012 at 9:45
how are you currently trying to "select" the desired nodes? Please also show the markup immediately before and after the set of nodes you want wrapped. — Alnitak
– Alnitak, Commented Jan 26, 2012 at 9:46
Added how I'm selecting the links. And HTML before and after! — heffaklump
– heffaklump, Commented Jan 26, 2012 at 10:02

Alnitak · Accepted Answer · 2012-01-26 10:43:28Z

1

Given valid markup as input, this works:

// find first link - using jQuery for expedience here
var a = $('.box > a')[0];

// create new div, and insert it before the link
var d = document.createElement('div');
d.id = 'nav';
a.parentNode.insertBefore(d, a);

// for each following node, reparent it inside the div
while (a && a.tagName !== 'P') {
    var n = a.nextSibling;
    d.appendChild(a);
    a = n;
};

It's actually easier without jQuery, because jQuery provides no easy way to obtain the text nodes that are contained within your menu.

Working demo at http://jsfiddle.net/HpgJV/3/

To fix your incorrect HTML input, try this:

$('.box a[href^="#"]').each(function() {
    $(this).contents().insertAfter(this);
});

which will move any text nodes that are dropped inside the <a> tags because of the invalid markup so that they're after the tag instead.

edited Jan 26, 2012 at 10:43

answered Jan 26, 2012 at 10:23

Alnitak

341k72 gold badges420 silver badges503 bronze badges

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

Collectives™ on Stack Overflow

Wrap a mixed set of text nodes and HTML elements with JavaScript / jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related