Question

这是我第一次写这里。我有一个javascript的基本级别。任何帮助将不胜感激！

the html code

<li>
<b>stathmoi: </b><span id="Title"></span><br/>
<b>thermokrasia: </b><span id="Temp"></span><br/>
<b>Elevation: </b><span id="Elevation"></span><br/>
</li><hr/>
<li>
<b>stathmoi: </b><span id="Title"></span><br/>
<b>thermokrasia: </b><span id="Temp"></span><br/>
<b>Elevation: </b><span id="Elevation"></span><br/>
</li><hr/>
<li>
<b>stathmoi: </b><span id="Title"></span><br/>
<b>thermokrasia: </b><span id="Temp"></span><br/>
<b>Elevation: </b><span id="Elevation"></span><br/>
</li><hr/>
<li>
<b>stathmoi: </b><span id="Title"></span><br/>
<b>thermokrasia: </b><span id="Temp"></span><br/>
<b>Elevation: </b><span id="Elevation"></span><br/>
</li><hr/>

the js code


    if (window.XMLHttpRequest)  
      {// code for IE7+, Firefox, Chrome, Opera, Safari  
      xmlhttp=new XMLHttpRequest();  
      }   
    else  
      {// code for IE6, IE5  
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
      }
    xmlhttp.open("GET","domparser.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML;

    //document.getElementsByTagName('li');  
    document.getElementById("Title").innerHTML=  
    xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;  
    document.getElementById("Temp").innerHTML=  
    xmlDoc.getElementsByTagName("temp")[0].childNodes[0].nodeValue;  
    document.getElementById("Elevation").innerHTML=  
    xmlDoc.getElementsByTagName("elevation")[0].childNodes[0].nodeValue;  
    //document.getElementById("Title").innerHTML=  
    xmlDoc.getElementsByTagName("title")[1].childNodes[0].nodeValue;  
    //document.getElementById("Temp").innerHTML=  
    xmlDoc.getElementsByTagName("temp")[1].childNodes[0].nodeValue;  
    //document.getElementById("Elevation").innerHTML=  
    xmlDoc.getElementsByTagName("elevation")[1].childNodes[0].nodeValue;

这是xml代码 - domparser.xml

<channel>    
<item>    
<title>kalimnos</title>    
<temp>50</temp>    
<elevation>650m</elevation>    
</item>    
<item>    
<title>kerkira</title>    
<temp>30</temp>    
<elevation>1650m</elevation>    
</item>    
<item>    
<title>iraklio</title>    
<temp>50</temp>    
<elevation>50m</elevation>    
</item>    
<item>    
<title>xania</title>    
<temp>30</temp>    
<elevation>150m</elevation>    
</item>    
</channel>

当html文件运行时，仅显示xml文件的第一个“item”的数据我试图每次都显示xml的不同“项目”的所有列表项。

例如在第1个列表项中：
stathmoi：kalimnos
thermokrasia：50
海拔：650米

例如在第二个列表项中：
stathmoi：kerkira
thermokrasia：30
海拔：1650米

等

Answer 1

为跨度使用不同的ID。

<li>
<b>stathmoi: </b><span id="Title"></span><br/>
<b>thermokrasia: </b><span id="Temp"></span><br/>
<b>Elevation: </b><span id="Elevation"></span><br/>
</li><hr/>
<li>
<b>stathmoi: </b><span id="Title1"></span><br/>
<b>thermokrasia: </b><span id="Temp1"></span><br/>
<b>Elevation: </b><span id="Elevation1"></span><br/>
</li><hr/>

Answer 2

从'旧学校'javascript方法，您可以执行以下操作。

获得数据后，您可以循环访问，随时创建结构。这意味着结构将与您收到的数据一样大或小。

标题

window.onload = function() {
  var ul = document.getElementById("my-listview");

  // replace 'i<10' with 'i<xmlDoc.getElementsByTagName("title").length' 
  for (var i=0; i<10; i++) {
    var li = document.createElement("li");
    // Left 1
    var divLeft1 = document.createElement("div");
    divLeft1.className = "Left1";
    li.appendChild(divLeft1);
    var div2 = document.createElement("div");
    div2.id = "Title"+i
    div2.innerHTML = div2.id; //xmlDoc.getElementsByTagName("title")[i].childNodes[0].nodeValue;
    divLeft1.appendChild(div2);

    // Left 2
    var divLeft2 = document.createElement("div");
    divLeft2.className = "Left2";
    li.appendChild(divLeft2);
    var div3 = document.createElement("div");
    div3.id = "Temp"+i
    div3.innerHTML = div3.id; //xmlDoc.getElementsByTagName("temp")[i].childNodes[0].nodeValue;
    divLeft2.appendChild(div3);
    var div4 = document.createElement("div");
    div4.id = "Elevation"+i
    div4.innerHTML = div4.id; //xmlDoc.getElementsByTagName("elevation")[i].childNodes[0].nodeValue;
    divLeft2.appendChild(div4);

    // Right1
    var divRight1 = document.createElement("div");
    divRight1.className = "Right1";
    li.appendChild(divRight1);
    var div5 = document.createElement("div");
    div5.id = "Beaufort"+i
    div5.innerHTML = div5.id;  //xmlDoc.getElementsByTagName("beaufort")[i].childNodes[0].nodeValue;
    divRight1.appendChild(div5);

    ul.appendChild(li);
  }
};

页面加载完成后，会将结构插入'ul'：

您可以在W3Schools上找到有关'createElement'的更多信息，但可以通过这种方式创建任何标准标签。 http://www.w3schools.com/jsref/met_document_createelement.asp

从列表项中调用数据

2 个答案: