从XML生成画廊图片标签 解决标签显示为纯文本图片无法加载问题

• JS代码中document.createElement('')传入空参数，创建了无效的DOM元素，无法正常渲染内容
• XML的节点存储的是转义后的HTML字符串（<被转义为<、"被转义为"），直接赋值会被识别为纯文本而非可解析的HTML标签
• 节点插入逻辑错误：tableGallery.children[1]尝试向ul的子元素插入li，正确逻辑是直接向ul（即tableGallery）本身插入li节点
• 未按照示例结构给
• 添加data-thumb属性，会导致轮播/画廊插件的缩略图功能失效

修正后的完整JS代码如下：

<script>
let tableGallery = document.getElementById('image-gallery');
fetch('info2.xml').then(response => response.text())
.then(xml => {
    let parser = new DOMParser();
    let xmlDOM = parser.parseFromString(xml, 'application/xml');
    let gallery = xmlDOM.querySelectorAll('BILD');

    gallery.forEach(galleryXmlNode => {
        // 拿到转义的img字符串
        let escapedImg = galleryXmlNode.querySelector('PIC').textContent;
        // 解码转义字符得到真实HTML
        let tempDiv = document.createElement('div');
        tempDiv.innerHTML = escapedImg;
        let realImgHtml = tempDiv.innerHTML;
        // 提取原图地址，按照示例规则生成缩略图地址
        let imgSrc = tempDiv.querySelector('img').src;
        let thumbSrc = imgSrc.replace('zim_', 'zim_s_');
        // 生成符合示例结构的li节点
        let row = document.createElement('li');
        row.setAttribute('data-thumb', thumbSrc);
        row.innerHTML = realImgHtml;
        // 插入到画廊列表中
        tableGallery.appendChild(row);
    });
    // 动态元素加载完成后，重新初始化你使用的画廊插件即可正常渲染效果
    // 示例：如果使用contentSlider插件，补充一行 $('#image-gallery').contentSlider();
});    
</script>

补充说明 #

如果不需要保留原有ul内的静态li节点，可以在插入动态节点前先执行tableGallery.innerHTML = ''清空原有内容。如果你的缩略图命名规则和示例不同，自行调整thumbSrc的拼接逻辑即可。

内容的提问来源于stack exchange，提问作者bruno2000