1

这是我在这里的第一篇文章，大家好。我是 JavaScript 新手，这就是我正在努力解决的问题。可能我的问题的标题有点嘲讽，但我正在研究的是 Google Api 提要。该代码将所有标题放入一个 div 并将内容放入另一个。我希望看到它们混合在一起。请看一下，并在此先感谢您。

 <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

    google.load("feeds", "1");

    function initialize() {
      var feed = new google.feeds.Feed("http://encompassme.com/rss/posts/en.xml");
      feed.setNumEntries(2);
      feed.load(function(result) {
        if (!result.error) {


        var containerTitle = document.getElementById("title");
        var containerContent = document.getElementById("content");

          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];

            var div = document.createElement("div");
            var diva = document.createElement("div");

            div.appendChild(document.createTextNode(entry.title)); 
            diva.appendChild(document.createTextNode(entry.content)); 


            containerTitle.appendChild(div);
            containerContent.appendChild(diva);

          }

        }
      });
    }
    google.setOnLoadCallback(initialize);

    </script>
  </head>
  <body>
  <div id="entry">
    <div id="title"></div>
    <div id="content"></div> 
   </div> 
  </body>
</html>

我得到了什么：

title
title
content
content

我想要的是：

title
content
title
content
4

3 回答 3

2

只需将 title 和 div 元素都附加到同一个容器中，如下所示：

containerContent.appendChild(div);
containerContent.appendChild(diva);

工作示例

问题是您将所有标题附加到一个 div，并将所有内容附加到另一个 div。

发生的事情是这样的：

首先，您添加了标题和内容1：

<div> <!-- Fist div here -->
    Title 1
</div>
<div> <!-- Second div -->
    Content 1
</div>

一切似乎都很好，但是当您添加另一篇文章时，发生了这样的事情：

<div> <!-- Fist div here -->
    Title 1
    Title 2
</div>
<div> <!-- Second div -->
    Content 1
    Content 2
</div>

如果您只是将元素附加到 one 中<div>，它们将按照您添加它们的顺序在那里，因此导致：

<div> <!-- Fist div here -->
    Title 1
    Content 1
    Title 2
    Content 2
</div>
于 2013-01-29T14:43:56.233 回答
0

好吧，这似乎是一个排序问题，你有：

      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];

        var div = document.createElement("div");
        var diva = document.createElement("div");

        div.appendChild(document.createTextNode(entry.title));    //this places node after div
        diva.appendChild(document.createTextNode(entry.content)); //this places node after diva


        containerTitle.appendChild(div); // append after containerTitle
        containerContent.appendChild(diva); //append after containerContent

      }

在 containerContent 之后追加：

        containerContent.appendChild.appendChild(div); // append after containerTitle
        containerContent.appendChild(diva); //append after containerContent
于 2013-01-29T14:46:32.830 回答
0

尝试关注

 <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">

        google.load("feeds", "1");

        function initialize() {
          var feed = new google.feeds.Feed("http://encompassme.com/rss/posts/en.xml");
          feed.setNumEntries(2);
          feed.load(function(result) {
            if (!result.error) {

             var mastercontainer=document.getElementById("master");
          //  var containerTitle = document.getElementById("title");
           // var containerContent = document.getElementById("content");

              for (var i = 0; i < result.feed.entries.length; i++) {
                var entry = result.feed.entries[i];

                var div = document.createElement("div");
                var diva = document.createElement("div");

                div.appendChild(document.createTextNode(entry.title)); 
                diva.appendChild(document.createTextNode(entry.content)); 


                mastercontainer.appendChild(div);
                mastercontainer.appendChild(diva);

              }

            }
          });
        }
        google.setOnLoadCallback(initialize);

        </script>
      </head>

  <body>
  <div id="entry">
    <div id="master"></div>

   </div> 
  </body>
</html>
于 2013-01-29T14:46:54.563 回答