adding results of XML request to a page

Question

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>

ftm · Answer 1 · 2013-10-27T21:50:07.417

I wrote a script fairly similar to yours that does nearly exactly what you are on about. Below is the some normal JavaScript I used to put it all on the page, I have changed some of the variable names so it compares nicely with your code.

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);
}

This may need some more adapting to suit your needs but you get the general idea. This is just one way of doing it, there's probably loads of other ways including with jQuery that may be a bit neater actually.

You can use memberDiv.setAttribute('class', className) to set the class of each div to whatever you want

Below is a visual representation of this code to make it easier to understand, click for full scale (500*1750):

Hmmmm, I don't see how your code results in something different than mine. Thing is my code doesn't work. I have been able to get some output using innerHTML but this destroys the content that is already on the page. Thanks — MJMacarty, Oct 27 '13 at 21:04
@user2925833 I take it it worked then? I just added a visual representation of my code, maybe it will help? — ftm, Oct 27 '13 at 21:51
Thanks I got it to work using innerHTML. Thanks for the graphic though, very useful. What did you generate it with? — MJMacarty, Oct 28 '13 at 14:18

adding results of XML request to a page

1 Answers1