wrap plain text inside a div before another html element

Question

Ok, that probably doesn't make a ton of sense... let me illustrate:

<div class="csl-entry"> lorem ipsum yada yada yada... <a title="some title" rel="external" href="http://google.com">Google</a> </div>

I would like to wrap the "lorem ipsum yada yada yada..." in a <p> tag, but am unsure how to proceed without also wrapping the <a> .

If it's easier to do in JavaScript or jQuery, I'm fine with that, too. Much of my site is semi-dependent on a bit of JS anyway.

Thanks!

Answer 1

Wrapping a <a> tag inside a <p> tag inside a <div> is perfectly ok.

So I'd say just do:

<div class="csl-entry"> 
     <p>
          lorem ipsum yada yada yada... 
          <a title="some title" rel="external" href="http://google.com">Google</a>
     </p>
</div>

If I understand your question well that is... :)

Answer 2

Using jquery

$('.csl-entry').contents().filter(function() {

  return this.nodeType == 3;

}).wrap('<p></p>')
            })

Please note that this will wrap all text nodes that are children of csl-entry - so if you have any stray spaces in the div you will get an empty paragraph tag.