如何使用JQuery append（），add（）或appendTo（）将对象附加到DOM元素？

Question

I can't seem to get this working, even though I have the idea it is perfectly correct. Consider the following code:

<script type="text/javascript>
        ul = $(".qtrans_language_chooser");
        parent = ul.parent();
        activeLangLi = ul.children("li.active");

        parent.prepend('<ul class="qtrans_active_language"></ul>');
        activeLangUl = $(".qtrans_active_language");
        o = activeLangLi.appendTo(activeLangUl);
        activeLangLi.remove();
</script>

All I'm trying to do is add activeLangLi to the empty activeLangUl. But no matter if I use append(), appendTo() or add() it never shows up.

Answer 1

Remove this line:

activeLangLi.remove();

This removes the elements from the DOM. append and appendTo will move (not copy) the elements from the current location to the new one. If you remove them afterwards, well, then they are gone.

You could also optimize your code to:

var ul = $(".qtrans_language_chooser");
$('<ul class="qtrans_active_language"></ul>')
    .prependTo(ul.parent())
    .append(ul.children("li.active"));

Don't forget to use var .