adding results of XML request to a page

Posted by user2925833 on Stack Overflow See other posts from Stack Overflow or by user2925833
Published on 2013-10-27T19:27:05Z Indexed on 2013/10/27 21:53 UTC
Read the original article Hit count: 186

Filed under:
|
|
|

I am trying to get a feel for adding content to a page with XMLHTTPRequest. I would like to add the results to existing page content say in a second column, but I am not having any luck. I would appreciate a shove in the right direction. Thanks for any help.

<!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>

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about html