Как вставить элемент в существующий HTML jQuery?

Question

У меня есть HTML-фрагмент кода:

<div class="main-photo" style="height: 304.875px;"> 
    <img class="big-thumb" src="blob:http://localhost:8080/cf4ffcff-7322-44dc-8c46-3c29ef165378" style="top: -27px;"> 
</div> 

Мне нужно привести, когда мышь парения:

<div class="main-photo" style="height: 304.875px;"> 
    <a class="fancybox fancybox.iframe" href="blob:http://localhost:8080/cf4ffcff-7322-44dc-8c46-3c29ef165378"> 
     <img class="big-thumb" src="blob:http://localhost:8080/cf4ffcff-7322-44dc-8c46-3c29ef165378" style="top: -27px;"> 
    </a> 
</div> 

Я пытаюсь что-то вроде этого, с помощью JQuery, когда при наведении мыши на изображение (окурок идея):

$('.main-photo').hover(function() { 
    $('.main-photo ').append()..attr('class', 'fancybox fancybox.iframe'); 
}); 

но нет работа.

Answer 1

Вам нужно будет обернуть/разворачивать элемент якорь, также будет лучше извлекать источник якоря динамически из изображения

$('.main-photo').hover(function() { 
 
    var $img = $(this).find('img'), 
 
    $a = $('<a />', { 
 
     'class': 'fancybox fancybox.iframe', 
 
     href: $img.attr('src') 
 
    }); 
 
    $img.wrap($a) 
 
}, function() { 
 
    $(this).find('img').unwrap() 
 
});

.main-photo { 
 
    border: 1px solid grey; 
 
} 
 
.fancybox { 
 
    border: 1px solid green; 
 
    background-color: lightblue; 
 
    display: inline-block; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="main-photo" style="height: 304.875px;"> 
 
    <img class="big-thumb" src="//placehold.it/64X64" style="top: -27px;"> 
 
</div>

Answer 2

Вы можете попробовать это:

$('.main-photo').hover(function() { 
    $(this).find("img").wrap('<a class="fancybox fancybox.iframe" href="blob:http://localhost:8080/cf4ffcff-7322-44dc-8c46-3c29ef165378"></a>'); 
}, function(){ 
    $(this).find('img').unwrap(); 
}); 

Answer 3

$('.main-photo').hover(function() { 
    $('.main-photo ').append()..attr('class', 'fancybox fancybox.iframe'); 
}); 

Попробуйте изменить свой код в этот

$('.main-photo').hover(function() { 
    $('.main-photo ').append("<a class="fancybox fancybox.iframe" href="blob:http://localhost:8080/cf4ffcff-7322-44dc-8c46-3c29ef165378">"); 
    $(".big-thumb").append("</a>"); 
});