Internet Explorer前置要以不同的方式显示

Question

I have the following HTML code:-

<ul id="list1">
    <li class="a">item 1</li>
    <li class="a">item 2</li>
    <li class="b">item 3</li>
    <li class="b">item 4</li>
</ul>

And the following script:-

<script type="text/javascript">
    $("document").ready(function() {
            $("#list1 li:last").prependTo("#list1 li:first");

    });
</script>

The intended display is:-

But on IE I'm seeing:-

I'm using jQuery 1.10.2.

Any clues?

Answer 1

Looks like you are trying to move the last li to the first position, that means you need to prepend it to the ul element not to the first li

$("#list1 li:last").prependTo("#list1");

Demo: Fiddle

which is the same as inserting it before the first element using insertBefore('#list1 li:first')

Why the display varies in browsers? Because you create an invalid html markup by appending an li to another li , li should be added to a ul or ol element

Answer 2

If you want to put the last li to the first position before the first li , try to use insertBefore() instead:

$("document").ready(function() {
    $("#list1 li:last").insertBefore("#list1 li:first");
});

Demo

or you can use prependTo() which has the same effect:

$("document").ready(function() {
    $("#list1 li:last").prependTo("#list1");
});

Demo