2011-08-14 6 views
2

div에 마우스를 올려 놓고 본문 부분에 새 div를 추가하고 여기에 일부 코드를 추가하고 싶습니다.jquery append new div

하지만 내 문제는 : 이제는 새로운 div를 추가하지 않고 첫 번째 모든 html을 대체합니다. 문제가 어디에 있습니까? 감사. http://jsfiddle.net/U7QqB/3/

JS

jQuery(document).ready(function() { 
    $('.click').hover(function(){ 
    var html = $(this).find('.text').html(); 
    $('body').append('<div id="object"/>').html(html).css({'top':'200px','left':'300px','z-index':'10'}); 
    }); 
}); 

CSS

.click{position:realavite;top:100px;left:300px;} 
.text{display:none;} 
.object{position:absolute;} 

HTML의

<body> 
<h1>A hover append div text</h1> 
<div class="click"> 
    <img src="http://nt3.ggpht.com/news/tbn/U7Q-7enFr00rUM/1.jpg" /> 
    <div class="text">text</div> 
</div> 
</body> 

답변

7

때문에 append() 복귀 원래 jQuery를 객체 (ELE <body> 함유 한 첨부 된 내용이 포함 된 새로운 내용이 아닙니다.

대신 appendTo()를 사용할 수 있습니다

$('<div id="object">').appendTo('body').html(html).css({ 
    'top': '200px', 
    'left': '300px', 
    'z-index': '10' 
}); 
1
$('<div/>',{ 
    id: 'object' 
}).appendTo('body') 
    .html(html) 
    .css({ 
    'top': '200px', 
    'left': '300px', 
    'z-index': '10' 
}); 
관련 문제