Question

For instance:

FROM

<div>
   whats up!
   <div> whats up2! </div>
   thank you for your help
   <div></div>
</div>

TO

<div>
   <span>whats up!</span>
   <div><span> whats up2! </span></div>
   <span>thank you for your help</span>
   <div></div> <!---STAYS THE SAME -->
</div>

How would I make something like this in jQuery or pure JavaScript?

Answer 1

Having this HTML:

<div id="container" >
   whats up!
   <div> whats up2! </div>
   thank you for your help
</div>​​​

You could do something like this:

var nodes = document.getElementById('container').childNodes;

$(nodes).each(function(ind, el){
    if(el.nodeType == 3)
        $(el).wrap('<span>');
    else
        $(el).wrapInner('<span>');
});

​
As far as I know, you can’t get text nodes with jQuery (correct me if I’m wrong please’), so you can get them with pure JavaScript and use jQuery’s method wrap

http://jsfiddle.net/hyJA6/2/