Javascript 添加新XML节点时将XML解析为新元素会出现问题

所以我要做的是将XML数据解析到一个ID为post的新DIV中，每次将post添加到XML文件（posts.XML）时都会发生这种情况

我不确定我是否忽略了什么，但我无法获取要显示/呈现的XML数据

XML:

<POSTS>
    <POST>
        <TITLE>Title 123</TITLE>
        <AUTHOR>Bob Dylan</AUTHOR>
        <CONTENT>BLAH BLAH BLAH</CONTENT>
    </POST>
<POSTS>

  (function () {

  // Adds a DOM structure for each post.
  function renderPosts(posts) {

    // Get the DOM element that will contain the posts.
    var postsDiv = document.getElementById("posts");

    posts.forEach(function (post) {

      // Create the DOM elements.
      var postDiv = document.createElement("div"),
          postTitleDiv = document.createElement("div"),
          postAuthorDiv = document.createElement("div"),
          postContentDiv = document.createElement("div");

      // Set the content of each element.
      postNameDiv.innerHTML = post.name;
      postAuthorDiv.innerHTML = post.author;
      postContentDiv.innerHTML = post.content;

      // Set CSS classes on each div so they can be styled.
      postDiv.setAttribute("class", "post");
      postNameDiv.setAttribute("class", "post-title");
      postAuthorDiv.setAttribute("class", "post-author");
      postContentDiv.setAttribute("class", "post-content");

      // Assemble the post div.
      postDiv.appendChild(postTitleDiv);
      postDiv.appendChild(postAuthorDiv);
      postDiv.appendChild(postContentDiv);

      // Add the post div to the container for posts.
      postsDiv.appendChild(postDiv);
    });
  }

  // Fetches the file "posts.xml"
  function getPosts(callback){

    // Fetch the xml file using XMLHttpRequest.
    var request = new XMLHttpRequest();

    // When the file has loaded,
    request.onload = function () {

      // parse the XML text into an array of post objects.
      //var posts = XML.parse(request.responseXML);

      // Pass the posts array to the callback.
      callback(posts);
    };
    request.open("GET", "posts.xml", false);
    request.send();
    xmlDoc=xmlhttp.responseXML; 
  }

  // The main program, which gets then renders posts.
  getPosts(function (posts) {
    renderPosts(posts);
  });

}()); //End Main Function

---

您从哪里获取XML.parse？这不是浏览器提供的API。这会抛出一个JavaScript错误，阻止脚本对数据执行任何操作

posts

因此未定义。如果您想简化此操作，数据应该是JSON，因此可以使用JSON.parse。否则，您需要使用DOMParser手动解析XML：

  (function () {

  // Adds a DOM structure for each post.
  function renderPosts(posts) {

    // Get the DOM element that will contain the posts.
    var postsDiv = document.getElementById("posts");

    posts.forEach(function (post) {

      // Create the DOM elements.
      var postDiv = document.createElement("div"),
          postTitleDiv = document.createElement("div"),
          postAuthorDiv = document.createElement("div"),
          postContentDiv = document.createElement("div");

      // Set the content of each element.
      postNameDiv.innerHTML = post.name;
      postAuthorDiv.innerHTML = post.author;
      postContentDiv.innerHTML = post.content;

      // Set CSS classes on each div so they can be styled.
      postDiv.setAttribute("class", "post");
      postNameDiv.setAttribute("class", "post-title");
      postAuthorDiv.setAttribute("class", "post-author");
      postContentDiv.setAttribute("class", "post-content");

      // Assemble the post div.
      postDiv.appendChild(postTitleDiv);
      postDiv.appendChild(postAuthorDiv);
      postDiv.appendChild(postContentDiv);

      // Add the post div to the container for posts.
      postsDiv.appendChild(postDiv);
    });
  }

  // Fetches the file "posts.xml"
  function getPosts(callback){

    // Fetch the xml file using XMLHttpRequest.
    var request = new XMLHttpRequest();

    // When the file has loaded,
    request.onload = function () {

      // parse the XML text into an array of post objects.
      //var posts = XML.parse(request.responseXML);

      // Pass the posts array to the callback.
      callback(posts);
    };
    request.open("GET", "posts.xml", false);
    request.send();
    xmlDoc=xmlhttp.responseXML; 
  }

  // The main program, which gets then renders posts.
  getPosts(function (posts) {
    renderPosts(posts);
  });

}()); //End Main Function