Javascript 将XML请求的结果添加到页面_Javascript_Html_Xmlhttprequest_Jqxhr

Javascript 将XML请求的结果添加到页面

javascript html

Javascript 将XML请求的结果添加到页面,javascript,html,xmlhttprequest,jqxhr,Javascript,Html,Xmlhttprequest,Jqxhr,我正在尝试使用XMLHTTPRequest为页面添加内容。我想把结果添加到现有的页面内容，比如在第二列，但我没有任何运气。我希望能朝着正确的方向努力。谢谢你的帮助 <!DOCTYPE html> <html> <head> <style> #button{ float: left; } #team{ float: left; } </style> <title&g

我正在尝试使用XMLHTTPRequest为页面添加内容。我想把结果添加到现有的页面内容，比如在第二列，但我没有任何运气。我希望能朝着正确的方向努力。谢谢你的帮助

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


#钮扣{
浮动：左；
}
#团队{
浮动：左；
}
XMLHTTPRequest
$（文档）.ready（函数（）{
xhr=newXMLHttpRequest（）；
xhr.onreadystatechange=函数（）{
如果（xhr.readyState==4&&xhr.status==200）{
xmlDoc=xhr.responseXML；
var team=xmlDoc.getElementsByTagName（“团队成员”）；
var html=“”；
对于（i=0；i”+
xmlDoc.getElementsByTagName（“标题”）[i].childNodes[0].nodeValue+“
”+
xmlDoc.getElementsByTagName（“bio”）[i].childNodes[0].nodeValue+“

”；
}
//这是我想要帮助的代码
var team=document.getElementById（“团队”）；
appendChild（document.createTextNode（“html”）；
}
}
open（“GET”，“team.xml”，true）；
});
点击我！

我编写了一个与您的脚本非常相似的脚本，它几乎完全符合您的要求。下面是我用来将所有内容放在页面上的一些普通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);
}

用于（i=0；ihmmm，我看不出您的代码与我的代码有什么不同。问题是我的代码不起作用。我已经能够使用innerHTML获得一些输出，但这会破坏页面上已有的内容。Thanks@user2925833我想它可以工作了吧？我刚刚添加了一个代码的可视化表示，也许会有帮助？谢谢，我走了使用innerHTML无法正常工作。不过，感谢您提供的图形，非常有用。您是用什么生成的？@user2925833我使用了一些令人惊叹的MS绘画技巧：）