Question

我试图通过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>

Answer 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）：

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

1 个答案: