0

我想问而不是使用document.write，如何使用innerHTML将XML信息写入div？我尝试使用 document.getElementById("box").innerHTML 但我不确定如何。

<!DOCTYPE html>
<html>
<head>

<script>
    function loadXMLDoc(dname){
    if (window.XMLHttpRequest){
    xhttp=new XMLHttpRequest();
    }else{
    xhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhttp.open("GET",dname,false);
    xhttp.send();
    return xhttp.responseXML;
    }
</script>

<script>
    xmlDoc=loadXMLDoc("books.xml");

    x=xmlDoc.getElementsByTagName("title");
    for (i=0;i<x.length;i++)
    { 
    document.write(x[i].childNodes[0].nodeValue);
    document.write("<br>");
    //instead of using document.write how do I use innerHTML?
    //this is the method i tried:
    //txt = document.write(x[i].childNodes[0].nodeValue);
    //document.getElementById("box").innerHTML = txt;
    //it is not working, can anyone advice?
    }
    </script>

</head>

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

</html>
4

4 回答 4

1

尝试这个

var xmlText = document.createTextNode('<xml></xml>');
document.getElementById("box").appendChild(xmlText);
于 2013-03-29T17:17:00.407 回答
0

XML 节点没有HTMLElements上的innerHTML属性；您必须在节点上使用DOM方法或将其转换为String。

var xmlDoc=loadXMLDoc('books.xml'), 
    x = xmlDoc.getElementsByTagName('title'),
    xs = new XMLSerializer();
document.getElementById('box').innerHTML = '';
for (i=0; i<x.length; ++i) { 
    // the nodes you want
    document.getElementById('box').innerHTML += xs.serializeToString(x[i]) + '\n<br />\n';
}

或者，return xhttp.responseText并使用它，但您将无法遍历节点。

于 2013-03-29T17:24:41.930 回答
0 
<!doctype html>
<html>
  <head>
    <script
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script>
      $(function()
      {
        $.get('books.xml', function(xml)
        {
           var box = $("#box");
           var xmldoc = $($.parseXML(xml));

           xmldoc.each('title', function()
           {
             box.append($(this).text() + "<br>");
           });
        });
      });
    </script>
  </head>
  <body>
    <div id="box"></div>
  </body>
</html>
于 2013-03-31T23:33:31.637 回答
0

这是脚本的更新版本；这对我来说可以：

<!DOCTYPE html>
<html>
    <head>
        <script>
            function loadXMLDoc(dname) {
                var xhttp = null, xml = null, titles = null, html = "";
                if(window.XMLHttpRequest) {
                    xhttp = new XMLHttpRequest();
                } else {
                    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                if(!xhttp) {
                    alert("Failed to make the request!");
                } else {
                    xhttp.open("GET", dname, false);
                    xhttp.send();
                    xml = xhttp.responseXML;
                    titles = xml.getElementsByTagName("title");
                    for(var i = 0, len = titles.length; i < len; i++) {
                        html += titles[i].childNodes[0].nodeValue + "<br />";
                    }
                    document.getElementById("box").innerHTML = html;
                }
            }
            window.onload = function(){
                loadXMLDoc("books.xml");
            };
        </script>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>

我使用的 XML：

<?xml version="1.0"?>
<books>
    <book>
        <title>This is a title</title>
    </book>
    <book>
        <title>This is a title 2</title>
    </book>
    <book>
        <title>This is a title 3</title>
    </book>
    <book>
        <title>This is a title 4</title>
    </book>
</books>

这是脚本的实时版本。

于 2013-03-29T17:17:40.493 回答