Question

I try to insert some child tag to a<div> tag like that :

$('#div1')
.append('<p style="float:left;width:82%;">blablablalb <ul><li>llist item</li><li>another list item</li></ul></p>');

<div id="div1"></div>

I get this result :

<div id="div1">
   <p style="float:left;width:82%;">
       blablablalb 
   </p>
   <ul>
      <li>llist item</li>
      <li>another list item</li>
   </ul>
   <p></p>
</div>

But I would like the code to be hierarchised as written in the .append argument. Ie. the list should be inside the <p> element and not after.

Is there a way to do that ?

http://jsfiddle.net/jPEWW/

Answer 1

Actually this is not related to jQuery. You cannot use an ul element within a p element, most of the browsers close the p element when they see ul element has been used.