Question

我想问一下，而不是使用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>

Answer 1

试试这个

var xmlText = document.createTextNode('<xml></xml>');
document.getElementById("box").appendChild(xmlText);

Answer 2

这是脚本的更新版本;它适用于我：

<!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>

here is a live version of the script。

Answer 3

XML节点没有像 HTMLElements 那样的 innerHTML 属性;您必须使用 Nodes 上的 DOM 方法或serealise 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并使用它，但您将无法循环遍历节点。

Answer 4

<!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>

如何使用innerHTML将XML写入DIV

4 个答案: