javascript - jQuery - 如何在 DOM 底部添加新的 div

Question

当鼠标移到屏幕上的图像上时，我需要添加一个 div，这会在视口(viewport)底部创建同一图像的更大版本。不幸的是，我认为我这样做不正确，因为当我为 div 创建新节点时它无法识别某些元素。它无法识别图像的 alt。

这是我的 jQuery 代码:

$(function(){
  $(".img-responsive").mousemove(function(e) {
    $("main").append(
      var alt = $(this).attr("alt");
      var src = $(this).attr("src");
      var newsrc = src.replace("small","medium");

      var preview= $('<div id="preview"></div>');
      var image = $('<img src="' + newsrc + '">');
      var caption = $('<p>' + alt + '</p>');
    );
  });
});

这是 HTML:

<img src="images/5857298322.jpg" alt="image 1" class="img-responsive">
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.  </p>
<p><button class="btn btn-primary" type="button">View details</button></p>

Answer 1

您的 JavaScript 代码的语法无效。您正在调用append jQuery 元素的方法，需要 HTML 字符串、DOM 元素或文本、数组或另一个 jQuery 元素。

相反，您尝试传递一系列语句，这是 JavaScript 不支持的。检查您的浏览器控制台，它可能会显示一条或多条语法错误消息。

要修复代码，您可以将语句移至 append 方法调用之前，并将您创建的 jQuery 元素作为数组传递，如下所示:

$(function(){
  $(".img-responsive").mousemove(function(e) {
    var alt = $(this).attr("alt");
    var src = $(this).attr("src");
    var newsrc = src.replace("small","medium");

    var preview= $('<div id="preview"></div>');
    var image = $('<img src="' + newsrc + '">');
    var caption = $('<p>' + alt + '</p>');
    $("main").append([preview, image, caption]);
  );
  });
});