innerHTML 创建从 XML 到图库的图像标签

Question

我正在尝试将图像标签加载到我的 HTML 中。问题是生成的标签显示为文本并且未加载图像。我该如何解决这个问题？最后，它应该看起来像例子。

这是 XML 数据 info2.xml

              <BILD ID="8">
              <ID>8</ID>
              <PIC>&lt;IMG SRC="https://d1pgrp37iul3tg.cloudfront.net/zimmer_pics/zim_238461_008.jpg" width="586" height="480" BORDER=0></PIC>
             </BILD><BILD ID="6">
              <ID>6</ID>
              <PIC>&lt;IMG SRC="https://d1pgrp37iul3tg.cloudfront.net/zimmer_pics/zim_238461_006.jpg" width="640" height="480" BORDER=0></PIC>
             </BILD><BILD ID="1">
              <ID>1</ID>
              <PIC>&lt;IMG SRC="https://d1pgrp37iul3tg.cloudfront.net/zimmer_pics/zim_238461_001.jpg" width="640" height="480" BORDER=0></PIC>
             </BILD><BILD ID="4">
              <ID>4</ID>
              <PIC>&lt;IMG SRC="https://d1pgrp37iul3tg.cloudfront.net/zimmer_pics/zim_238461_004.jpg" width="638" height="480" BORDER=0></PIC>
             </BILD>

<script>
        let xmlContent = '';
        let tableGallery = document.getElementById('image-gallery');
        fetch('info2.xml').then((response)=> {
            response.text().then((xml)=>{
                xmlContent = xml;

                let parser = new DOMParser();
                let xmlDOM = parser.parseFromString(xmlContent, 'application/xml');
                let gallery = xmlDOM.querySelectorAll('BILD');

                gallery.forEach(galleryXmlNode => {

                    let row = document.createElement('li');

                    //Picture
                    let img = document.createElement('');
                    img.innerHTML = galleryXmlNode.children[1].innerHTML;
                    row.appendChild(img);

                    tableGallery.children[1].appendChild(row);
                    
                });
            });
        });    
    </script>

<!--gallery-->
        <div class="clearfix" style="max-width:540px;">
                <ul id="image-gallery" class="gallery list-unstyled cS-hidden">
                    <li data-thumb="images/knurrhahn/thumbs/zim_s_238842_007.jpg"> 
                        <img src="images/knurrhahn/site/obj_full_91963_003.jpg" />
                         </li>
                    <li data-thumb="images/knurrhahn/thumbs/zim_s_238842_015.jpg"> 
                        <img src="images/knurrhahn/site/zim_full_238842_015.jpg" />
                         </li>
                     </ul>
            </div>
        <!--gallery end-->

Answer 1

如评论中所述，您的 xml 确实格式不正确。如果你真的无法获得生成格式良好的 xml 的来源，你可以尝试将其视为 html 并取消转义 html 实体。然而，从长远来看，这并不是最好的方法。

至少在您的示例中，以下内容会起作用 xml：

let parser = new DOMParser();
let xmlDOM = parser.parseFromString(xmlContent, "text/html");

let gallery = xmlDOM.evaluate(
  "//BILD//PIC",
  xmlDOM,
  null,
  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
  null
);
for (let i = 0; i < gallery.snapshotLength; i++) {
  let galleryXmlNode = gallery.snapshotItem(i);
  row = document.createElement("li");
  row.innerHTML = galleryXmlNode.textContent
  tableGallery.appendChild(row);
}

innerHTML 创建从 XML 到图库的图像标签

innerHTML create image Tag from XML to Gallery

javascript

xml

xml-parsing