0

私はJavaスクリプトコードを持っています.htmlを使用してdivにxmlデータを表示したいので、divを使用してhtmlにxmlデータのコンテンツを表示できます 

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", "cd_catalog.xml", false);
    xmlhttp.send();
    xmlDoc = xmlhttp.responseXML;

    document.write("<table border='1'>");
    var x = xmlDoc.getElementsByTagName("CD");
    for (i = 0; i < x.length; i++) {
        document.write("<tr><td>");
        document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
        document.write("</td><td>");
        document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
        document.write("</td></tr>");
    }
    document.write("</table>");
    </script>




 </head>
 <body onload="displayCD(2)">
 <div id='showCD'>
 </div>
4

4 に答える 4

0

使用しないでくださいdocument.write。

次のように、必要な div をフェッチします。

var the_div = document.getElementByI("showCD");

次に、コンテンツを設定します (TextNode を使用):

var text_node = document.createTextNode(xmlDoc);
the_div.appendChild(text_node);

または多分xmlhttp.responseText代わりに.responseXML。responseXML標準かどうかはわかりません。

于 2013-10-25T09:05:53.907 に答える
0 
    <div>
<table id="cds">
</table>
</div>
<script type="text/javascript">

    var xhr= window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    xhr.onreadystatechange= function() {
        if (this.readyState===4 || this.status===200)
            populateTable(this.responseXML);
    };
    xhr.open('GET', 'cd_catalog.xml', true);
    xhr.send();

    function populateTable(xml) {
        var table= document.getElementById('cds');
        var cds= xml.getElementsByTagName('CD');
        for (var i= 0; i<cds.length; i++) {
            var row= table.insertRow(-1);

            function getProperty(name) {
                var el= cds[i].getElementsByTagName(name)[0];
                if (el.firstChild)
                    return el.firstChild.data;
                return ''; // allow empty elements
            }
            function addCell(value) {
                row.insertCell(-1).appendChild(document.createTextNode(value));
            }

            addCell(getProperty('ARTIST'));
            addCell(getProperty('TITLE'));
        }
    };

</script>
于 2013-10-25T09:18:43.903 に答える
0

それほど複雑ではありません。

<body>
    <div id="showCD"></div>

    <script>

        var divCDs = document.getElementById('showCD'); 
        var List = xml.getElementsByTagName('CD');

       for (var i = 0; i < List.length; i++) {

            // dynamic DIV.
            var new_div = document.createElement('div');
            new_div.innerHTML = List[i].getElementsByTagName("TITLE") [0].childNodes[0].nodeValue;

            divCDs.appendChild(new_div);

       }

    </script>
</body>

完全なコードを確認してください。

于 2014-07-17T04:36:28.800 に答える