How to find text without html tag and wrapp it with a p elment

Question

I have the following HTML code. I would like to find and replace the text without HTML tags and wrap it inside a p element using jQuery. Is there a way to reach my goal?

<div class="col span_12_of_12 firstDiv">
  <h2>My tasks</h2>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  <ul>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
  </ul>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>

Answer 1

To achieve this you need to find the child textNodes and wrap them in a <p> tag. To do that you can use contents() and filter() then wrap(), like this:

$('.col').contents().filter(function() {
  return this.nodeType == 3 && this.textContent.trim();
}).wrap('<p />');

p { border: 1px solid #C00; } /* only used to make the output obvious */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col span_12_of_12 firstDiv">
  <h2>My tasks</h2>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  <ul>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
  </ul>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>