Question

我正在学习javascript，我正在尝试基于xml文件创建div。

XML文件 - 我意识到信息不正确（年）。

<?xml version="1.0" encoding="UTF-8"?>
<Movies>
        <Movie>
                <Title>Independence Day</Title>
                <Year>2003</Year>
                <Rating>75</Rating>
        </Movie>
        <Movie>
                <Title>GroundHog Day</Title>
                <Year>1998</Year>
                <Rating>80</Rating>
        </Movie>

</Movies>

然后我尝试生成一个html文件，我可以用css格式化div。

带JS的HTML

<html>
    <style type="text/css">
p {
    font-size: 14px;
}

div {
    border: 1px black solid;
    width: 100px;
    height: 100px;  
    position: relative;
    float: left;
}

</style>

 <body>

 <script>
 xmlhttp=new XMLHttpRequest();
 xmlhttp.open("GET","movies.xml",false);
 xmlhttp.send();
 xmlDoc=xmlhttp.responseXML; 


 var x=xmlDoc.getElementsByTagName("Movie");
 for (i=0;i<x.length;i++)
   { 
   document.write("<div><p>");
   document.write(x[i].getElementsByTagName("Title")[0].childNodes[0].nodeValue);
   document.write("</p><p>");
   document.write(x[i].getElementsByTagName("Year")[0].childNodes[0].nodeValue);
   document.write("</p><p>");
   document.write(x[i].getElementsByTagName("Rating")[0].childNodes[0].nodeValue);
   document.write("</p></div");
   }

 </script>

 </body>
 </html>

我正在收回数据，但我只生成一个div，数据溢出底部。为什么这不会产生两个div - 每部电影1个？

Answer 1

由于你想学习东西，我注意到你应该考虑的一些要点。

你写的风格看起来很老，你应该改进以下几点：

使用JSON而不是XML。该协议比XML更轻量级，并且更好地由Javascript处理。
不使用同步Ajax调用
不要使用文档写入，直接创建元素并在之后插入。

我的示例不包含ajax请求，您可以查看相应的MDN Docu on AJAX Calls，看看它是如何正确完成的。

// the important stuff of your async ajax call:

xhr.onload = function (e) {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      writeYourResultToTheDocument(xhr.responseText);
    } else {
      console.error("An error occured!" + xhr.statusText);
    }
  }
};


function writeYourResultToTheDocument(response){

/* This code should is called when your request is complete */

// this is how it would look like in real:
// var movies = JSON.decode(response);
// since I don't do a real request, I take a "fake" result:
var movies =  [
        {   "Title" : "Independence Day",
            "Year": 2003,
            "Rating":75
        },
        {
            "Title":"GroundHog Day",
            "Year":1998,
            "Rating":80
        } 
    ];

 // Create Container Element for all movies
var container = document.createElement("div");

// declare every variable you use with "var" to *not* 
// create a global variable accidently
var movie,node;

// iterate over the result
for (var i = 0;i < movies.length;i++){
    //create a div for each movie
    movie = document.createElement("div");
    // insert all information
    for(el in movies[i]){
        node = document.createElement("p");
        node.innerHTML = el + " : " +movies[i][el];
        console.log(node);
        movie.appendChild(node);
    }
    container.appendChild(movie);
}
// finally, append the container to your document
document.body.appendChild(container);

}

以及它如何运作：http://jsfiddle.net/xyLe4/

Answer 2

不确定这是您的帖子或实际代码中的拼写错误，但是您错过了上次>的结束div。那很可能是造成这个问题的原因......

Answer 3

使用document.createElement('div')创建元素并将子项附加到body。

var newDiv = document.createElement('div');
document.body.appendChild(newDiv);

还有一个小例子：http://jsfiddle.net/NicoO/FKHb6/

以下是一些文字内容的相同示例：

var Text = "Hello fine sir!"
var newDiv = document.createElement('div'); 
newDiv.appendChild(document.createTextNode(Text));
document.body.appendChild(newDiv);

在行动中查看此内容：http://jsfiddle.net/NicoO/FKHb6/1/

如何使用javascript和XMLHttpRequest生成div

3 个答案: