XMLからhtmlに画像を表示する方法

Question

私はXML、Javascriptを練習しています。各動物の画像を一列に並べて表示したい。しかし、私の主な問題は、イメージの不均一な入れ子になります。 IMGのため

<zoo> 
    <animal> 
     <common_name>Elephant</common_name> 
     <images> 
      <image>elephant13.jpg</image> 
     </images> 
    </animal> 
    <animal> 
     <common_name>Emu</common_name> 
     <images> 
      <image>emu12.jpg</image> 
      <image>emu26.jpg</image> 
      <image>emu23.jpg</image> 
     </images> 
    </animal> 
    <animal> 
     <common_name>Lion</common_name> 
     <images> 
      <image>lion51.jpg</image> 
      <image>lion46.jpg</image> 
     </images> 
    </animal> 
<zoo>` 

私のjavascriptは次のとおりです：

for(var y = 0; y < noOfImages ; y++) 
{ 
    if (images) 
    { 
     images.src ="images/" + zooRoot.getElementsByTagName("image")[i].firstChild.nodeValue; 
     ul.appendChild(images); 
    } 
} 

Answer 1

はこれを試してみてくださいいくつかは、次のように4.私はXMLファイルを持っていながら、いくつかは、2枚の画像を持っています。これはxmlのドキュメントノードを取得し、そこからイメージを問い合わせます。配列を取得したら、それを反復してノードから内部のテキストを取得します。 var xmlimages = xml.getElementsByTagName（ 'image'）;

for(var i=0; i< xmlimages.length; i++) { 
    images.src = "images/" + xmlimages[i].innerHTML.trim(); // trim used to remove all the white space from text that you get when you use innerHTML 
} 

Answer 2

オブジェクトとしてAnimalを取得してから、HTMLstringを作成してノードに挿入してください。私の英語のための soory

var animalsNode = zooRoot.getElementsByTagName('animal'); 
var animals = []; 
for(var i=0; i<animalsNode.length; i++){ 
    var animalName = animalsNode[i].getElementsByTagName("common_name").innerHTML; 
    var animalImageNodes = animalsNode[i].getElementsByTagName("image"); 
    var animalImages = []; 

    //will store image paths into animalImages 
    for(var j=0; j<animalImageNodes.length; j++){ 
    animalImages.push("image/" + animalImageNodes.innerHTML); 
    } 
    animals.push({ 
    common_name: animalName, 
    images: animalImages //array of image urls 
    }) 
} 
var animalsHTML = function(animals){ 
    //lets cereate string with "html table" 
    var animalsHtml = "<table>"; 
    for(var i=0; i<animals.length; i++){ 
    animalsHtml += "<tr>"; 

    animalsHtml += "<td>" + animals[i].name + "</td>" 
       + "<td><img src='" + animals[i].images[0] + "' /></td>"; 

    animalsHtml += "</tr>"; 
    } 
    animalsHtml += "</table>"; 

    return animalsHtml; 
} 

tableNode.innerHTML = animalsHTML(animals); 

たり、動物の配列、より機能的な方法を定義することができます=）私はそれをテストしていない

var animals = zooRoot.getElementsByTagName('animal').map(function(animalNode){ 
    return { 
    common_name: animalNode.getElementsByTagName('common_name')[0].innerHTML, 
    images: animalNode.getElementsByTagName('image').map(function(imageNode){ 
     return "image/" + imageNode.innerHTML; 
    }) 
    }; 
}); 
//and more js style of draw-function 
var animalsHTML = function(animals){ 
    return "<table>" + animals.reduce(function(curr, next){ 
    return curr + "<tr><td>" + next.name + "</td>" 
        + "<td>" 
        + next.images.reduce(function(c, n){ 
         return c + "<img src='" + n "' />" 
        },'') 
        + "</td>" 
       + "</tr>"; 
    }, '') + "</table>"; 
} 
tableNode.innerHTML = animalsHTML(animals); 

ものでなければならな作品=）

Answer 3

挿入してくださいノード上のループ：

for(var y = 0; y < noOfImages ; y++) 
{ 
    if (images) 
    { 
     var imgData = zooRoot.getElementsByTagName("image"); 
     for (i = 0; i <imgData.length; i++) { 
      images.src ="images/" + imgData[i].firstChild.nodeValue; 
      ul.appendChild(images); 
     } 
    } 
}