XML 요청 결과를 페이지에 추가

XMLHTTPRequest가 포함 된 페이지에 내용을 추가하려고합니다. 두 번째 열에있는 기존 페이지 콘텐츠에 결과를 추가하고 싶습니다.하지만 운이 좋지는 않습니다. 나는 옳은 방향으로 쑤셔 주셔서 감사합니다. 어떤 도움을 주셔서 감사합니다.XML 요청 결과를 페이지에 추가

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    #button{ 
     float: left; 

    } 
    #team{ 
     float: left; 
    } 

</style> 
<title>XMLHTTPRequest</title> 

<script src="jquery-1.10.2.js"></script> 

<script> 
    $(document).ready(function(){ 
     xhr = new XMLHttpRequest(); 
     xhr.onreadystatechange = function(){ 
      if (xhr.readyState == 4 && xhr.status == 200) { 
       xmlDoc = xhr.responseXML; 
       var team = xmlDoc.getElementsByTagName("teammember"); 
       var html = ""; 
       for (i = 0; i < team.length; i++){ 
        html += 
        xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue + "<br>" + 
        xmlDoc.getElementsByTagName("title")[i].childNodes[0].nodeValue + "<br>" + 
        xmlDoc.getElementsByTagName("bio")[i].childNodes[0].nodeValue + "<br><br>"; 

       } 
       //this is the code I would like help with 
       var team = document.getElementById("team"); 
       team.appendChild(document.createTextNode("html")); 
      } 
     } 
     xhr.open("GET", "team.xml", true); 

    }); 
</script> 
</head> 

<body> 

<div id="button"> 
    <button onclick="xhr.send()">Click Me!</button> 
</div> 

<div id="team"> 
</div> 
</body> 
</html>

출처

2013-10-27 MJMacarty

거의 비슷한 내용의 스크립트를 작성했습니다. 아래는 페이지에 모든 것을 넣는 데 사용되는 일반적인 JavaScript입니다. 일부 변수 이름이 변경되어 코드와 잘 비교됩니다.

for (i=0; i<team.length; i++) 
{ 

    //Create text nodes for each element as that's what appendChild() needs 
    var nameText = document.createTextNode(xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue); 
    var titleText = document.createTextNode(xmlDoc.getElementsByTagName("title")[i].childNodes[0].nodeValue); 
    var bioText = document.createTextNode(xmlDoc.getElementsByTagName("bio")[i].childNodes[0].nodeValue); 

    //This div will contain one team member's info 
    var memberDiv = document.createElement('div'); 

    //Add text to the div created 
    memberDiv.appendChild(nameText); 
    //Line break 
    memberDiv.appendChild(document.createElement('br')); 
    memberDiv.appendChild(titleText); 
    memberDiv.appendChild(document.createElement('br')); 
    memberDiv.appendChild(bioText); 

    //Add the div we've just created to the document. 
    document.getElementById('team').appendChild(memberDiv); 
}

사용자의 요구에 맞게 조정해야 할 수도 있지만 일반적으로 생각해보십시오. 이것은 단지 한 가지 방법 일뿐입니다. jQuery를 포함하여 실제로는 조금 더 깔끔한 다른 방법이있을 것입니다.

당신은 풀 스케일 (500 * 1750)에 대한 클릭이 코드의 시각적 표현이 쉽게 이해할 수 있도록하는 것입니다 당신이 아래

를 원하는 각 div의 클래스를 설정하는 memberDiv.setAttribute('class', className)를 사용할 수 있습니다

를

출처

2013-10-27 20:15:19 frasertmay

흠, 나는 당신의 코드가 어떻게 다른 결과를 낳는 지 알지 못합니다. 내 코드가 작동하지 않습니다. innerHTML을 사용하여 출력물을 얻을 수 있었지만 이미 페이지에있는 내용을 파괴합니다. 고마워요 – MJMacarty

@ user2925833 그때 그것을 받아 들일까? 방금 내 코드의 시각적 표현을 추가했습니다. 아마 도움이 될까요? – frasertmay

감사합니다. innerHTML을 사용하여 작동하도록했습니다. 그래도 그래픽을 가져 주셔서 감사합니다. 매우 유용합니다. 당신은 그것을 무엇으로 만들었습니까? – MJMacarty

XML 요청 결과를 페이지에 추가

답변

관련 문제