innerHTML從XML到圖庫創建影像標簽-有解無憂

我正在嘗試將影像標簽加載到我的 HTML 中。問題是生成的標簽顯示為文本并且沒有加載影像。我該如何解決這個問題？最后，它應該看起來像示例。

這是 XML DATA 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-->

uj5u.com熱心網友回復：

正如評論中提到的，您的 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);
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/368128.html

標籤：javascript xml xml解析

上一篇：從R串列生成xml

下一篇：使用xslt3.0回圈查找