javascript - 从 XML 获取图像源并使用 javascript 加载它

Question

我有以下 XML 文件

<PRODUCT>
      <IMAGE><image href="myimage.jpg"/></IMAGE>
      <NAME>TV 47" LCD Full HD Scarlet</NAME>
      <PRICE>4999</PRICE>
</PRODUCT>

如您所见，我的元素有一个 href。我可以轻松地从 NAME 和 PRICE 获取文本数据。现在我需要从中获取 href 属性并加载它。这是我的脚本

<script type="text/javascript">
$(function() 
{ 
$.ajax(
{
    type: "GET",
    url: "xml.xml",
    dataType: "xml",
    success: function(xml) 
    {
        $(xml).find('PRODUCT').each(function() 
        {
            var name = $(this).find('NAME').text();
            var price = $(this).find('PRICE').text();
            var image = $(this).find('IMAGE').text();
            $('<p></p>').html(name+'<br />'+price+'<br />'+image).appendTo('#wrap');
        });
    }
});
});
</script>

如何提取 href 属性并将相应的图像加载到 div“包装”中？我尝试了使用 XML 在 HTML 中实现图像，但不起作用。感谢你们

Answer 1

var image = $(this).find('IMAGE').children().attr("href");

创建对象

imgobject=$("<img />").attr("src",image);

Answer 2

以这种方式获取 href 属性

var image = $(xml).find("image[href]").attr("href"); 

以这种方式将内容加载到 div

$('#wrap').append($("<img src=\"" +image+"\"/>"));   

Answer 3

你可以试试：

var imgUrl = $(xml).find("image[href]").attr("href"); 
$yourdiv.append($("<img src=\"" + imgUrl + "\"/>"));   

希望它有帮助。