How to find text without html tag and wrap it with

Question

I have the following HTML code. I would like to find and replace text without HTML tags and wrap it inside the p element using jQuery. Is there any way to achieve 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 do this, you need to find the child text nodes and wrap them with the <p> . For this you can use contents() and filter() , then wrap() , for example:

 $('.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>