Question

I have structure like this.

<ul class="gallerylist">
<li>
    <image ...>
    <input ...>
</li>
<li>
    <image ...>
    <input ...>
</li>
<li>
    <image ...>
    <input ...>
</li>
<p style="clear:both;">&nbsp;</p>
</ul>

because of visual correction i have to use <p style="clear:both;">&nbsp;</p> part and i’am adding new list items dynamically via JQuery by:

$('ul.gallerylist').append('<li><img .../><br/><input .../></li>');

but as you can guess it is appended after the <p style="clear:both;">&nbsp;</p> part and it corrupts the visual correction.

My question is : Which way is true to add li inside ul as last but before p tag?

Answer 1

Note

I think your HTML markup is not valid, can’t place p within ul like you’ve done. Better would be wrap the p within another li and use CSS to accomplish you job.

For example:

HTML

<ul class="gallerylist">
    <li>
        <img src="">
        <input type="text">
    </li>
    <li>
        <img src="">
        <input type="text">
    </li>
    <li>
        <img src="">
        <input type="text">
    </li>
    <!-- wrap within li and assign a class to that li-->
    <li class="makeclear">
            <p>&nbsp;</p>
    </li>
</ul>

CSS

/* apply css to that li*/
.makeclear{
    clear:both;
}

jQuery

$('ul.gallerylist li.makeclear')
         .before('<li><img src=""/><br/><input type="text"/></li>');

DEMO

Read about .before(), it will insert an element before the matched element by selector.

OR

$('<li><img src=""/><br/><input type="text"/></li>')
                   .insertBefore('ul.gallerylist li.makeclear');

DEMO

Read about jQuery .insertBefore()

But, valid markup is necessary otherwise IE will make you mad. Comments below can give you some clues.