Javascript ajax调用附加到链接

我想在链接后附加一张与链接具有相同url的图片。 通过下面的AJAX代码，我得到了以下结果：

<a href="images/Draadloos.png" data-lightbox="gallerij"></a>

我想要的示例：

<a href="images/Draadloos.png" data-lightbox="gallerij"><img src="images/Draadloos.png" id="ResizePicture" Alt="Draadloos" /></a>

阿贾克斯：

$.ajax({
url:'xml/images.xml'，
数据类型：“xml”，
成功：功能（数据）{
控制台日志（数据）；
$（数据）。查找（'images-image'）。每个（函数（）{
var url=$（this.find（'url'）.text（）；
$（'.timeline'）。追加(
$('', {
href:url，
“数据灯箱”：“gallerij”
}));
});
},
错误：函数（）{
console.log（'Fotos zijn niet ingeladen'）；
}
});

HTML:

---

要添加图像，您可以这样调用：

$('.timeline ').append( 
        $('<a />', { href: "foo.png", html: "<img src=foo.png title=FooImg />"}
));

$（'.timeline'）。附加（
$（“”，{href:“foo.png”，html:}
));

为了帮助您更多，一个演示小提琴或codepen.io会很有帮助。 例如 -ajax调用返回的是什么？这意味着什么是内部数据？

---

-html内部数据的外观如何，以便find（'images image'）提供匹配项

如果做得很好，只需将image元素附加到a标记中：

$.ajax({
    url: 'xml/images.xml',
    dataType: 'xml',
    success: function(data){
        console.log(data);
        $(data).find('images image').each(function(){
            var url = $(this).find('url').text();
            $('.timeline ').append(
                $('<a />', {
                    href: url,
                    "data-lightbox": "gallerij"

                    }).append('<img />', {
                        src: url, 
                        id:"ResizePicture", 
                        alt: url // see my note below on this...
                    }));
            });
        },
    error: function(){
        console.log('Fotos zijn niet ingeladen');
        }
});

$.ajax({
url:'xml/images.xml'，
数据类型：“xml”，
成功：功能（数据）{
控制台日志（数据）；
$（数据）。查找（'images-image'）。每个（函数（）{
var url=$（this.find（'url'）.text（）；
$（'.timeline'）。追加(
$('', {
href:url，
“数据灯箱”：“gallerij”
}).append（'
对于图像的
alt
属性，您可以从XML中提取另一个值来填充它，或者您可能需要使用另一种方法，可能是URL上的正则表达式，如果它们总是相同的模式…
在代码中，您在哪里尝试将图像添加到
a
标记？更新了代码。这是一个灯箱，谢谢你，这就是我一直在寻找的解决方案
$('.timeline ').append( 
        $('<a />', { href: "foo.png", html: "<img src=foo.png title=FooImg />"}
));

$.ajax({
    url: 'xml/images.xml',
    dataType: 'xml',
    success: function(data){
        console.log(data);
        $(data).find('images image').each(function(){
            var url = $(this).find('url').text();
            $('.timeline ').append(
                $('<a />', {
                    href: url,
                    "data-lightbox": "gallerij"

                    }).append('<img />', {
                        src: url, 
                        id:"ResizePicture", 
                        alt: url // see my note below on this...
                    }));
            });
        },
    error: function(){
        console.log('Fotos zijn niet ingeladen');
        }
});