Using appendTo() in JQuery adds element then immediately removes it...solution?

Question

This is probably a noob question, but how I've implemented the appendTo() function below doesn't work as expected. Basically, it added the element and instantly removed it again. It's blink and you miss it stuff.

Can anyone understand why this might be happening?

Here's where the function gets called:

<?php foreach ($words as $word) {
echo    "<li class='$word[0]'><a href='' onclick='add_to();'>$word</a></li>";
} 

And here's the function itself (pretty much taken from the jQuery tutorial site:

function add_to () {
        $('<h1>Test</h1>').appendTo('.ad_text');
    }

My first thought is that a script that calls document.ready() is called, which wipes out the add_to() function? That script is above add_to(), and is this:

$(document).ready(function(){

        //when a link in the filters div is clicked...
        $('#filters a').click(function(e){

            //prevent the default behaviour of the link
            e.preventDefault();

            //get the id of the clicked link(which is equal to classes of our content
            var filter = $(this).attr('id');

            //show all the list items(this is needed to get the hidden ones shown)
            $('#content ul li').show();

            /*using the :not attribute and the filter class in it we are selecting
            only the list items that don't have that class and hide them '*/
            $('#content ul li:not(.' + filter + ')').hide();

        });

    });

Possibly a conflicting bit of code there? Sorry - new to Javascript, and trying to cobble something together quickly.

TIA, Andy

Answer 1

Your link is reloading the page. Try this (added # to the href attribute)

foreach ($words as $word) {
    echo    "<li class='$word[0]'><a href='#' onclick='add_to();'>$word</a></li>";
}

Answer 2

I can't say for sure but you might be overriding the click function that you defined in the onclick attribute with the one in the document.ready function.