Всплывающее меню скрывает свой родительский текст?

Question

У меня есть всплывающее меню, которое показывает/скрывается, когда div зависает. Меню, показывающее/скрывающее, отлично работает. Однако у div есть текст «Квадрат» в нем, который исчезает, когда я добавляю в него меню в коде.

index.html

<div id= "squareDiv" style="width: 100px; height:100px; border:2px solid #a1a1a1;" > 
    Square 
</div> 

мой JS

//Add list items to the div 
$("#squareDiv").html(
    "<ul class='list_menu'><li><a href='firefox.com'>Maya Agriculture</a></li>"+ 
    "<li><a href='firefox.com'>Maya Agriculture Crossword</a></li>"+ 
    "<li><a href='firefox.com'>Inca Agriculture</a></li>"+ 
    "<li><a href='firefox.com'>Inca Agriculture Crossword</a></li>"+ 
    "</ul>" 
); 

$("#squareDiv").hover(function() { 
    $('ul.list_menu').slideDown('medium',function() { 
    $(this).clearQueue(); 
    }); 
}, function() { 
    $('ul.list_menu').slideUp('medium',function() { 
    $(this).clearQueue(); 
    }); 
}); 

Answer 1

использование append(...) вместо html(...), html() заменяет содержании