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

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

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

这里是我的JS的一个最小版本

<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>

var folder=“gallery all/”；
var photosRow=document.getElementById（“照片行”）；
var前缀=”；
$.ajax({
url:文件夹，
成功：功能（数据）{
$（数据）.find（“a”）.attr（“href”），function（i，val）{
如果（val.match（/\（jpe？g | png | gif）$/）{
photosRow.append（前缀+文件夹+val+后缀）；
} 
});
}
});

这是显示浏览器的内容：

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

检查页面后，代码为：

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

“”
""
""
""

---

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

事实证明，问题是

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>

var folder=“gallery all/”；
var前缀=”；
$.ajax({
url:文件夹，
成功：功能（数据）{
$（数据）.find（“a”）.attr（“href”），function（i，val）{
如果（val.match（/\（jpe？g | png | gif）$/）{
$（“#照片行”）.append（前缀+文件夹+val+后缀）；
} 
});
}
});

---

但是我不知道为什么。

您只是在追加字符串。实际上，您需要附加一个元素

var folder=“gallery all/”；
var photosRow=document.getElementById（“照片行”）；
var前缀=”；
$.ajax({
url:文件夹，
成功：功能（数据）{
$（数据）.find（“a”）.attr（“href”），function（i，val）{
if（val.match（/\（jpe？g | png | gif）$/）{
const img=$（'

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

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

更新

获取纯javascript对象，而不是Jquery对象，并附加所使用的内容，因为它需要一个HTML元素

但是当您使用

$（'#photo row'）

时，它会返回Jquery对象和append方法，即从文本构建元素的Jquery方法

---

当您使用Jquery时，不要将纯javascript和Jquery混用坚持使用它

var photostrow=document.getElementById（“photo row”）；获取javascript对象，而不是Jquery对象，并附加您使用的是它需要一个html元素，但当您使用$（“#photo row”）时它返回Jquery对象和append方法，现在是从文本构建元素的Jquery方法

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