Question

我需要从目录中抓取每张照片，将它们包装在s中，然后将整个内容添加到容器div中。

问题在于，浏览器中的每一行都显示在一组双引号内。

这是我的JS的最低版本

Readme.md

这就是浏览器：

<script>
var folder = "gallery-all/";
var photosRow = document.getElementById("photo-row");

var prefix = "<img src='";
var postfix = "'>";

$.ajax({
    url : folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) { 
                photosRow.append(prefix + folder + val + postfix);
            } 
        });
    }
});
</script>

并且在检查页面时代码是：

<img src='gallery-all/img1.jpg'>
<img src='gallery-all/img2.jpg'>
<img src='gallery-all/img3.jpg'>
<img src='gallery-all/img4.jpg'>

我尝试了各种转义方法，将不同的部分存储为变量，等等。不管我做什么，双引号总是显示出来。

Answer 1

您仅附加字符串。您实际上需要附加一个元素。

<script>
var folder = "gallery-all/";
var photosRow = document.getElementById("photo-row");

var prefix = "<img src='";
var postfix = "'>";

$.ajax({
    url : folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) {
                const img = $('<img />', { src: folder + val });
                photosRow.append(img);
            } 
        });
    }
});
</script>

Answer 2

事实证明问题是

photosRow.append

如果我将其替换为

$('#photo-row')

然后它起作用了！

<script>
var folder = "gallery-all/";

var prefix = "<img src='";
var postfix = "'>";

$.ajax({
    url : folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) { 
                $('#photo-row').append(prefix + folder + val + postfix);
            } 
        });
    }
});
</script>

我不知道为什么。

Answer 3

尝试使用$（）方法从文本创建一个元素，然后附加该元素而不是文本作为示例，创建一个图像元素并将其附加到容器

container = $('#container');
imgEl = $('<img/>');
container.append(imgEl);

因此您的代码将是

$.ajax({
    url : folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) { 
                photosRow.append($(prefix + folder + val + postfix));
            } 
        });
    }
});

更新

var photosRow = document.getElementById("photo-row");

获取纯JavaScript对象，而不是Jquery对象，并附加您正在使用的https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append，它需要一个HTML元素。

但是当您使用$('#photo-row')时，它将返回Jquery对象并追加方法，现在是根据文本https://www.w3schools.com/jquery/html_append.asp构建元素的jquery方法

当您使用Jquery时，不要在纯JavaScript和Jquery之间混合使用

使用JS将HTML代码附加到div-不带双引号

3 个答案: