0

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

1 回答 1

0

我写了一个与你的脚本非常相似的脚本，它几乎完全符合你的要求。下面是我用来将其全部放在页面上的一些普通 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）：

于 2013-10-27T20:15:19.707 回答