加载并消失

I have a button inside a background:

<div id="background">
<div id="button">button</div>  
</div>

With jQuery I load the div of another page.

$(function(){      
    $("#button").click(function() {
        $("#background").load("document.html #note");
    });  
})

http://jsfiddle.net/9Sn9e/

The div loaded is much smaller than the background and it is positioned in the center:

#note{
    position: absolute;
    top: 150px;
    left: 150px;
    width:200px;
    height: 200px;
    line-height:200px;
    background-color: #eee;
}

I can load it, but when it is loaded the button disappear. Why?

The ids are completely different in the html and the javascript.
If the ids match, as you are loading the content into the div, the content of the div is completely replace and not appended to the existing content.

Modify your html as -

<div id="background">
    <div id="fons"></div> 
    <div id="boto">button</div>  
</div>