Hi Everyone!

when i'm clicking on .myClass I want 'a ' to appear before #message unfortunately 'a a a a a' appear instead of it.

My css are:

    #message{

    width: 80%;

    height: 10%;

    border-style:solid;

    border-width:5px;

}

 .hideIt{

    visibility:hidden;

}

and my code is:

<div id="message">test1 <span class="myClass hideIt">test2</span></div>

    <script src="jquery.js"></script>

    <script>

    $(function() {

        test = function() { $('#message').before('a '); }

        $(document).on('mouseover', '#message', function () {

            var el = $(this);

            el2 = el.children('.myClass');

            el2.removeClass('hideIt');

            el2.on('click',test);

            el.on('mouseout', function() {

                el2.addClass('hideIt');

            });

        });

    });

    </script>

here a Fiddle link: http://jsfiddle.net/TDJVw/