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

【问题标题】：adding results of XML request to a page将 XML 请求的结果添加到页面
【发布时间】：2013-11-06 11:52:45
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

标签： javascript html xmlhttprequest jqxhr

【解决方案1】：

我编写了一个与您的脚本非常相似的脚本，几乎完全符合您的要求。下面是我用来将其全部放在页面上的一些普通 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，实际上可能更简洁一些。

您可以使用memberDiv.setAttribute('class', className) 将每个div 的类设置为您想要的任何内容

下面是这段代码的可视化表示，为了更容易理解，点击查看全尺寸（500*1750）：

【讨论】：

嗯，我看不出您的代码如何导致与我的不同。事情是我的代码不起作用。我已经能够使用 innerHTML 获得一些输出，但这会破坏页面上已经存在的内容。谢谢
@user2925833 我认为它有效吗？我刚刚添加了我的代码的可视化表示，也许它会有所帮助？
感谢我使用 innerHTML 让它工作。不过感谢您的图形，非常有用。你是用什么生成的？
@user2925833 我使用了一些令人惊叹的 MS Paint 技能 :)