如何使用javascript动态向div添加随机数量的图像？

Question

我有一个空的div <div id="step2"> </div>并且我有一个php脚本，可从用户选择的网站检索图像。

我目前可以从网页的每个图像中获取src，并通过控制台对其进行记录，如下所示：

 <img src=​"https:​/​/​ichef-1.bbci.co.uk/​news/​320/​cpsprodpb/​D869/​production/​_97710455_f98a9739-db4a-4b2b-b418-7f68c55a43b8.jpg" class=​"thumbnail">​

 <img src=​"https:​/​/​ichef.bbci.co.uk/​images/​ic/​720x405/​p05fcpb5.jpg" class=​"thumbnail">​

我如何在不刷新页面的情况下将它们添加到div中？

Ps div设置为display: none 。 当用户输入URL并单击运行脚本时的按钮时，我使用jquery slideToggle显示div。

到目前为止，这是JavaScript代码：

$(window).load(function() {
            $('#step2Btn').on('click touch', function() {
                link = $('#link').val();
                if (link !== "") {
                    $.post("ajax/articleThumbnail.php", {
                        article: link
                    }, function(thumbnails) {
                        thumbnails = JSON.parse(thumbnails);
                        var imgs = $.map(thumbnails, function(el) { return el });
                        var step2 = $('#step2');
                        for (var i = 0, j = imgs.length; i < j; i++) {
                            var img = document.createElement('img');
                            img.src = imgs[i]; // img[i] refers to the current URL.
                            $(img).addClass("thumbnail");

                            console.log(img);
                        }
                    });
                    $('#step1').slideToggle(100);
                    $('#step2').slideToggle(100);
                }
            });
        });

Answer 1

您需要将document.createElement('img')创建的元素附加到div。

$('#step1').append(img)