I am reading an XML file and looping through the contents, displaying node values in <li>. The problem I am having is the the first part of my output string is showing up in he wrong element. Subsequent text shows up in the correct place.

Here is some sample XML:

Code:
<node>
        <name>Stability</name>
        <state>Low
            <state-prob>.15</state-prob>
        </state>
        <state>Moderate
            <state-prob>.25</state-prob>
        </state>
        <state>High
            <state-prob>.60</state-prob>
        </state>
    </node>
    
    <node>
        <name>Free/Fair Elections</name>
        <state>Yes
            <state-prob>.6</state-prob>
        </state>
        <state>No
            <state-prob>.4</state-prob>
        </state>
    </node>
    
    <node>
        <name>Regulatory Compliance</name>
        <state>Yes
            <state-prob>.8</state-prob>
        </state>
        <state>No
            <state-prob>.2</state-prob>
        </state>
        
    </node>

And here is my JS:

Code:
<!DOCTYPE html>

<html>
<head>
    
    <style>
        #button{
            float: left;
            width:50%;
        }
        #team{
            float: right;
            width:50%;
            vertical-align: top;
        }
        
    </style>
    <title>XMLHTTPRequest</title>
    
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        
    <script>
        $(document).ready(function(){
            xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if (xhr.readyState == 4 && xhr.status == 200) {
                    xmlDoc = xhr.responseXML;
                    var bn = xmlDoc.getElementsByTagName("node");
                    var html = "";
                    for (i = 0; i < bn.length; i++){
                        html +=
                        "<li>" + xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue + " " +
                        xmlDoc.getElementsByTagName("state")[i].childNodes[0].nodeValue + " " +
                        xmlDoc.getElementsByTagName("state-prob")[i].childNodes[0].nodeValue + "</li>";
                        
                    }
                    document.getElementById("nodes").innerHTML = html
                }
            }
            xhr.open("GET", "bn-my-test-data.xml", true);
            
        });
    </script>
</head>

<body>
    <section id="left">
        <h1>Hi Ria</h1>
        <p>How are you today?</p>
    <div id="button">
        
       <button onclick="xhr.send()">Ria Click Me!</button>
    </div>   
    </section>
    
    <section id="right">
    <div id="nodes">
    
  
        
    </div>
    </section>

</body>
</html>

Any insight on what I am doing wrong would be greatly appreciated.