如何通过 jQuery 将元素插入现有的 HTML？

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() { 
   $(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 2

$('.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>");
});

Answer 3

您将需要 wrap/unwrap 锚点元素，而且最好从图像中动态获取锚点的来源

$('.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>

如何通过 jQuery 将元素插入现有的 HTML？

How to insert element into existing HTML by jQuery?

html

javascript

jquery

fancybox