循环通过XML解析函数并在HTML中显示

Loop Through XML Parse Function and Display in HTML

本文关键字：HTML 显示 函数 XML 循环      更新时间：2023-09-26

我有一个函数，目前在iPhone应用程序中显示硬编码的XML数据;

    function viewXMLFiles() {
        xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", "TestInfo.xml", false);
        xmlhttp.send();
        xmlDoc = xmlhttp.responseXML;
        document.getElementById("docname").innerHTML = xmlDoc.getElementsByTagName("document_name")[0].childNodes[0].nodeValue;
        document.getElementById("filetype").innerHTML = xmlDoc.getElementsByTagName("file_type")[0].childNodes[0].nodeValue;
        document.getElementById("fileloc").innerHTML = pathToRoot + "/" + document.getElementById("docname").innerHTML;
        document.getElementById("docname1").innerHTML = xmlDoc.getElementsByTagName("document_name")[1].childNodes[0].nodeValue;
        document.getElementById("filetype1").innerHTML = xmlDoc.getElementsByTagName("file_type")[1].childNodes[0].nodeValue;
        document.getElementById("fileloc1").innerHTML = pathToRoot + "/" + document.getElementById("docname1").innerHTML;
    }

，我想把它放入一个循环，所以当我添加选项上传文件，文件将自动循环通过并显示数据，当一个按钮被点击，而不是不得不改变代码。按钮的编码如下:

<button onclick = "viewXMLFiles(); document.getElementById('showDocumentLink').style.display = 'block';">View Document Info</button><br>

，页面是这样设置的，以便将XML加载到其中;

    <div id = "doclist">
        <h2>Document 1;</h2>
        <label>Document Name;</label><br><span id = "docname"></span><br>
        <label>File Type</label><br><span id = "filetype"></span><br>
        <label>File Location</label><br><span id = "fileloc"></span><br>
    </div>
    <div id = "doclist">
        <h2>Document 2;</h2>
        <label>Document Name;</label><br><span id = "docname1"></span><br>
        <label>File Type</label><br><span id = "filetype1"></span><br>
        <label>File Location</label><br><span id = "fileloc1"></span><br>
    </div>

我对XML文件和如何使用JavaScript解析它们真的很陌生，所以任何帮助向我展示如何将它们正确地放入for循环将是伟大的。我真的不知道怎么做，所以任何帮助都会非常感激。提前感谢:)

试试这个....

xmlDoc = $.parseXML( xml ),
$xml = $( xmlDoc ),
$title = $xml.find( "document_name" );
$("#docname").append($title.text());
相关文章：