Question

基本上设计一个小型电子商店网站，我将产品信息放在表格中，我也想在表格中添加图片。这里是用于提取数据的JavaScript代码进入表格。

for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("IMAGE")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("PRICE")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("DELIVERY")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }

表格中的所有内容都显示但是图片显示为Null，这里是XML文件

<ProductsTable>
  <Product>
    <TITLE>Corsair PC Full Tower</TITLE>
    <DELIVERY>Free Delivery!</DELIVERY>
    <PRICE>$80</PRICE>
    <IMAGE><image href="images/case.jpg"/></IMAGE>
  </Product>
  <Product>
    <TITLE>Asus Motherboard</TITLE>
    <DELIVERY>Free Delivery!</DELIVERY>
    <PRICE>$129.99</PRICE>
    <IMAGE><image href="images/mobo.jpg"/></IMAGE>
  </Product>
  <Product>
    <TITLE>16GB Vengeance RAM</TITLE>
    <DELIVERY>Free Delivery!</DELIVERY>
    <PRICE>$44.99</PRICE>
    <IMAGE><image href="images/ram.png"/></IMAGE>
  </Product>
  <Product>
    <TITLE>Corsair VS650w PSU</TITLE>
    <DELIVERY>Free Delivery!</DELIVERY>
    <PRICE>$64.99</PRICE>
    <IMAGE><image href="images/psu.png"/></IMAGE>
  </Product>
  <Product>
    <TITLE>Intel i7-7700 CPU</TITLE>
    <DELIVERY>Free Delivery!</DELIVERY>
    <PRICE>$139.99</PRICE>
    <IMAGE><image href="images/cpu.jpg"/></IMAGE>
  </Product>
  <Product>
    <TITLE>Nvidia 1080 Graphics Card</TITLE>
    <DELIVERY>Free Delivery!</DELIVERY>
    <PRICE>$326.99</PRICE>
    <IMAGE><image href="images/gpu.png"/></IMAGE>
  </Product>
.
.
.
</ProductsTable>

非常感谢任何帮助。谢谢我在https://gyazo.com/be6b82d3ee90776ece46e6d7d9db221f

的地方的图片

Answer 1

您的<image>标记没有内容，因此nodeValue为空。

您需要获取href属性＆amp;将其放在HTML <img>标记中。

Answer 2

您应该通过attributes字段获取图片的价值。

改变这个：

x[i].getElementsByTagName("IMAGE")[0].childNodes[0].nodeValue

对此：

x[i].getElementsByTagName("IMAGE")[0].childNodes[0].attributes[0].value

使用JavaScript将XML文件中的图像拉入HTML

2 个答案: