How to add div tag after wrap with jquery

Question

(updated)

I want to change the following,

<div id="system">
   <div id="product_cont img">
      <img src="image1.jpg" />
      <img src="image2.jpg" />
      <img src="image3.jpg" />
..
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nunc porta euismod luctus. Curabitur vehicula scelerisque diam at vestibulum.     
Pellentesque in lacus et augue malesuad.
   </div>
</div>

to like this.

<div id="system">
    <div id="product_cont img">
      <ul class="cont_thumb">
        <li><img src="image1.jpg" /></li>
        <li><img src="image2.jpg" /></li>
        <li><img src="image3.jpg" /></li>
         ...
       </ul>
       <div style="clear:both;"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nunc porta euismod luctus. Curabitur vehicula scelerisque diam at vestibulum.     
Pellentesque in lacus et augue malesuad
    </div>
</div>

When I use the following I can wrap images with <li> and <ul>.

$("#system #product_cont img").wrapAll("<ul class=\"cont_thumb\">").wrap("<li>");

But I am not sure how to add this after the </ul> tag with jquery:

<div style="clear:both;"></div> 

I tried this, but it didn't work:

$("#system #product_cont img").wrapAll("<ul class=\"cont_thumb\">").wrap("<li>").after('<div style="clear:both;"></div>');

Could anyone help me please? Thanks in advance.

Answer 1

$("#system #product_cont img").append('<div style="clear:both;'></div>") should be sufficient.

Answer 2

If your <li> elements are floating, you can just put this in your CSS (instead of adding that <div>):

#cont_thumb { overflow: auto; }

So it'll factor in their height when figuring out its own. Quirksmode.org has a pretty good article on alternative approaches to clearing floats here. Also id="product_cont img" isn't valid, even in HTML5, you should use IDs that don't contain spaces to avoid side-effects and CSS selector pains.

Edited for comments: If you're zooming and need a full clear (and overflow: none also doesn't fit the bill), you can do this:

$("#system #product_cont img").wrapAll('<ul class="cont_thumb">').wrap('<li />')
                         .closest('ul').after('<div style="clear:both;"></div>');