Javascript 如何使用innerHTML将XML写入DIV_Javascript_Xml_Innerhtml

Javascript 如何使用innerHTML将XML写入DIV

javascript xml

Javascript 如何使用innerHTML将XML写入DIV,javascript,xml,innerhtml,Javascript,Xml,Innerhtml,我想问，如何使用innerHTML将XML信息写入div，而不是使用document.write？我尝试使用document.getElementById（“box”）.innerHTML，但我不确定如何使用 <!DOCTYPE html> <html> <head> <script> function loadXMLDoc(dname){ if (window.XMLHttpRequest){ xhttp=new XML

我想问，如何使用innerHTML将XML信息写入div，而不是使用document.write？我尝试使用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>


函数loadXMLDoc（dname）{
if（window.XMLHttpRequest）{
xhttp=newXMLHttpRequest（）；
}否则{
xhttp=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
xhttp.open（“GET”、dname、false）；
xhttp.send（）；
返回xhttp.responseXML；
}
xmlDoc=loadXMLDoc（“books.xml”）；
x=xmlDoc.getElementsByTagName（“标题”）；
对于（i=0；i试试这个
var xmlText = document.createTextNode('<xml></xml>');
document.getElementById("box").appendChild(xmlText);

var xmlText=document.createTextNode（“”）；
document.getElementById（“box”）.appendChild（xmlText）；
以下是脚本的更新版本；它对我来说很好：
<!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>


函数loadXMLDoc（dname）{
var xhttp=null，xml=null，titles=null，html=”“；
if（window.XMLHttpRequest）{
xhttp=newXMLHttpRequest（）；
}否则{
xhttp=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
如果（！xhttp）{
警报（“请求失败！”）；
}否则{
xhttp.open（“GET”、dname、false）；
xhttp.send（）；
xml=xhttp.responseXML；
titles=xml.getElementsByTagName（“title”）；
对于（变量i=0，len=titles.length；i”；
}
document.getElementById（“box”）.innerHTML=html；
}
}
window.onload=函数（）{
loadXMLDoc（“books.xml”）；
};

我使用的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>


这是一个标题
这是一个标题2
这是一个标题3
这是标题4

而且。
XML节点没有类似于HTMLElements的innerHTML属性；您必须在节点上使用DOM方法，或者将其转换为字符串
var xmlDoc=loadXMLDoc（'books.xml'），
x=xmlDoc.getElementsByTagName（'title'），
xs=新的XMLSerializer（）；
document.getElementById（'box'）。innerHTML=''；
对于（i=0；i
$（函数（）
{
$.get（'books.xml'，函数（xml）
{
变量框=$（“#框”）；
var xmldoc=$（$.parseXML（xml））；
xmldoc.each（'title'，function（）
{
追加（$（this）.text（）+“
”）；
});
});
});
您尝试该方法时发生了什么？@felix我不确定要添加什么。我尝试过使用该方法，但不起作用。//我尝试过的innerHTML txt=document.write（x[i].childNodes[0].nodeValue）；document.getElementById（“to”）.innerHTML=txt的方法；什么“不起作用”意思是？你有错误吗？如果有，哪一个错误？它根本没有显示？或者它没有按你希望的方式显示？如果有，你希望它如何显示以及如何显示？这些都是让我们更容易帮助你的要点。“它不起作用”从来都不是一个合适的问题描述。如果不希望将内容解释为html，则可以在xmldoc.each body（在box.append之前）中创建一个div，该body由var div=$（“”）；div.text（$（this.text（））；box.append（div）创建；
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';
}

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