使用 jQuery 向 div 添加一些 HTML答案

【问题标题】：Adding some HTML to a div with jQuery使用 jQuery 向 div 添加一些 HTML
【发布时间】：2015-06-24 05:06:27
【问题描述】：

我有这个 HTML

<div class="picture"></div>

根据视口宽度，我想在 div 中添加小图像或大图像，使其看起来像这样：

<div class="picture"><img src="small.jpg></div>

这是我在网上某处找到的一些 jQuery，它似乎完全符合我的要求。我现在唯一被卡住的部分是 img src="....jpg" 事情。我怎样才能翻译这个成jQuery？

jQuery(document).ready(function() {
    $(window).resize(function() {
        var window_width = $(document).width();
        if (window_width <= 1024) {

            img src = "small.jpg"

        } else {

            img src = "large.jpg"

        }
    });
});

谢谢！

【问题讨论】：

<img> 标签是否已经存在您只想更改源？
试试 $('.picture').prepend('')
@Varun 不，img 标签不存在。只是空的 div
只需在下面查看我的答案，为了安全起见，我已经回答了这两种情况@Groen91

标签： javascript jquery html

【解决方案1】：

如果您正在创建<img>

$(window).resize(function() {
    var window_width = $(document).width();
    if (window_width <= 1024) {
        $(".picture").html("<img src='small.jpg'>");
    } else {
        $(".picture").html("<img src='large.jpg'>");
    }
});

或者如果你只是想分配一个来源，

$(window).resize(function() {
    var window_width = $(document).width();
    if (window_width <= 1024) {
        $(".picture").find("img").attr("src", "small.jpg");
    } else {
        $(".picture").find("img").attr("src", "large.jpg");
    }
});

【讨论】：

谢谢，我想第一个就是我要找的。现在将对其进行测试并报告:)
好的，这很好，再次感谢！现在唯一奇怪的是当我加载页面时，两个图像都没有显示，只有当我更改浏览器大小时。有没有一种简单的方法来修复它，让它们默认显示？
@Groen91 您想要加载的图像还是任何特定的图像？
是的，具体的，而不是两者。
@Groen91 我想这将是相同的代码，但在 $(document).ready() 中，最好将它放在一个函数中并在 load 和 scroll 上调用它。

【解决方案2】：

您可以检查div 是否有img 元素更新了它的src，否则创建新的img 元素并附加它。

jQuery(document).ready(function() {
    $(window).resize(function() {
        var window_width = $(document).width();
        var imgsrc = "large.jpg"
        if (window_width <= 1024) {
            imgsrc = "small.jpg"
        }
        //Picture element
        var picture = $('.picture');

        //Picture has img element update its src else append new img tag
        if (picture.find('img').length) {
            picture.find('img').attr('src', imgsrc );
        } else {
            picture.append('<img src="' + imgsrc + '" />')
        }
    });
});

【讨论】：

【解决方案3】：

试试这个代码 sn-p:

jQuery(document).ready(function () {
    $(window).resize(function () {
        var window_width = $(document).width();
        var src = (window_width <= 1024) ? "small.jpg" : "large.jpg";
        $('.image').remove(); //Remove in order to avoid multiple images to be added.
        $('.picture').prepend($('<img />', {src: src, class: 'image'}));
    });
});

【讨论】：

【解决方案4】：

像这样：

$('.picture').find('img').attr('src','small.jpg');

【讨论】：

【解决方案5】：

您需要更新属性。

在 jQuery 中，您将执行以下操作来更新 src：

$('<img>') // create a new img node
  .attr('src', 'newsrc')  // set the src to your desired source
  .load(function(){
     this.appendTo('.picture');  // once the source has finished loading, append it to the <div>
   });

有关这方面的更多信息，请查看另一个 Stack Overflow 帖子：

Changing the image source using jQuery

【讨论】：

没有标签。他需要将其动态添加到 div 中

【解决方案6】：

在 jQuery 对象中预先缓存两个图像，这些对象由指向其源的图像元素构成。

然后，使用条件语句存储源字符串并引用它以将缓存的图像元素放置在页面上。

jQuery(document).ready(function() {
    //cache images
    var imgSet = {
        "small.jpg" : $('<img src="small.jpg" />'),
        "large.jpg" : $('<img src="large.jpg" />')
    };
    $(window).resize(function() {
        var window_width = $(document).width();
        var imgsrc;
        if (window_width <= 1024) {
            imgsrc="small.jpg";
        }else {
            imgsrc="large.jpg"
        }
        //use cached image element
        $('.picture').empty().append(imgSet[imgsrc]);
   });
});

【讨论】：

【解决方案7】：

在 jquery 中你可以使用append

$('.picture').append('<img src="small.png"/>');

【讨论】：

以为它也有img标签！立即更新答案
太棒了。您还需要在 append 中添加单引号。