hey everybody.

My problem is with the jquery .before and .after methods.

In my code i have a UL, but i need some HTML string to be placed before and after the <UL></UL>

Here is the resulting HTML i want:

								<div class="inlineListWrap">
									<img src="common/images/absoluteListTop_08.png" alt="" width="481" height="163" class="absoluteListTop" />
									<img src="common/images/absoluteListBot_13.png" alt="" width="479" height="117" class="absoluteListBot" />
									<div class="iListTop">
									</div>
									<div class="iListMid">
										<ul>
											<li>We ensure:</li>
											<li>Speedy e-mail confirmation of your order</li>
											<li>Offsite inventory tracking</li>
											<li>24×7 order placement facility</li>
											<li>Online inventory management</li>
											<li>Online reporting</li>
										</ul>
									</div>
									<div class="iListBot">
									</div>									
								</div>

so all the HTML you see before the<UL> i want to be inserted via JQ. and all the code after the </UL> would be inserted via JQ as well.

here is the JQ i have as of now:
http://twitter.com/

	$(".iContentMid ul").before("<div class='inlineListWrap'><img src='common/images/absoluteListTop_08.png' alt='' width='481' height='163' class='absoluteListTop' /><img src='common/images/absoluteListBot_13.png' alt='' width='479' height='117' class='absoluteListBot' /><div class='iListTop'></div><div class='iListMid'>");

	$(".iContentMid ul").after("</div><div class='iListBot'></div></div>");

But the result i am getting is this:

<div class="inlineListWrap">
	 <img width="481" height="163" class="absoluteListTop" alt="" src="common/images/absoluteListTop_08.png">
	 <img width="479" height="117" class="absoluteListBot" alt="" src="common/images/absoluteListBot_13.png">
	 <div class="iListTop"></div>
	 <div class="iListMid"></div>
</div>
<ul>
	<li class="listFirst">We ensure:</li>
	<li>Speedy e-mail confirmation of your order</li>
	<li>Offsite inventory tracking</li>
	<li>24×7 order placement facility</li>
	<li>Online inventory management</li>
	<li>Online reporting</li>
</ul>
<div class="iListBot"></div>

Why is this happening and how can i fix it?