Javascript 克隆div和insertBefore

我正在尝试克隆div“questbox”，并将其插入现有div中，添加新内容。但是克隆人的重复次数不止一次，而且顺序错误。我要最新的->最旧的

HTML

---

这里有几个问题：

---

您正在将

#top_quest

的克隆插入到

#top_quest

中。这自然会导致重复

您还创建了一组元素，其id为

s
“top\u quest”
，
“question”
，
“upvows”
，这些元素无效。只能有一个

首先，让我们去掉问号和upvots元素上的

id

值，改用类：

<div id="top_quest">
    <div class="questbox">
        <div class="quest" style="display:inline-block; width:75%;">
            <h5 class="question"></h5>
        </div>
        <div class="up-vote" style="display:inline-block; float:right; width:25%; text-align:center;">
            <button type="button" class="btn btn-lg btn-primary knapp"><div class="arrow-up"/></button>
            <h5 class="upvotes"></h5>
        </div>
    </div>
</div>

带有虚假ajax响应的实时示例：

var计数器=0；
函数insertPost（）{
var obj、dbParam、xmlhttp、top_quest；
//***只抓取父元素一次，无需在循环中不断查找
top_quest=document.getElementById（“top_quest”）；
obj={“表”：“文本”，“限制”：15}；
dbParam=JSON.stringify（obj）；
//设置timeout来伪造ajax
setTimeout（函数（）{
//这实际上应该是一个数组，而不是一个对象
var myObj={
13:{文本：“问题”+（++计数器），向上投票：Math.floor（Math.random（）*10）}，
14:{文本：“问题”+（++计数器），向上投票：Math.floor（Math.random（）*10）}，
15:{文本：“问题”+（++计数器），向上投票：Math.floor（Math.random（）*10）}
};
Object.key（myObj）.forEach（函数（key）{
var分录=myObj[键]；
//获取第一个。任务盒并克隆它
var clone=top_quest.querySelector（“.questbox”）.cloneNode（true）；
//提出问题并投票
clone.querySelector（“.question”）.innerHTML=entry.text；
clone.querySelector（“.upvows”）.innerHTML=entry.upvows；
//将克隆附加到顶部
top_quest.insertBefore（克隆，top_quest.firstChild）；
});
如果（计数器<10）{
insertPost（）；
}
}, 500);
}
insertPost（）

您正在将
#top_quest
的克隆插入到
#top_quest
中。这自然会导致重复。（您还创建了一组id为
s
“top\u quest”
，
“question”
，
“upvows”
…的元素，这些元素无效。只能有一个。）我得到：Uncaught TypeError:myObj.forEach不是XMLHttpRequest.xmlhttp中的函数。onreadystatechange@Frid：myObj是什么样子的？我假设它是一个数组，但显然不是…？Object{13:Object，14:Object，16:Object，17:Object}13:Object ID:“13”讲座ID:“0”发布者ID:null文本：“Hvorfor heter det capybara？”时间发布：“2017-04-06 17:28:30”投票：“0”@Frid:这是一个对象而不是数组。我已经更新了答案，但您可能希望将其改为数组（通过改变PHP）。我看不出它应该是对象的任何原因。好的，我将尝试将它更改为数组！非常感谢。
function insertPost(){
    var obj, dbParam, xmlhttp, myObj, x;
    obj = { "table":"text", "limit":15 };
    dbParam = JSON.stringify(obj);
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
          myObj = JSON.parse(this.responseText);

          for (x in myObj) {
              document.getElementById("question").innerHTML = myObj[x].text;
              document.getElementById("upvotes").innerHTML = myObj[x].upvotes;

              var parrent = document.getElementById("top_quest")
              var div = document.getElementById("top_quest");
              var clone = div.cloneNode(true);
              parrent.insertBefore(clone, parrent.firstChild);
          }
      }
    };
    xmlhttp.open("GET", "getPostsForLecture.php?q=", true);
    xmlhttp.send();
}

<div id="top_quest">
    <div class="questbox">
        <div class="quest" style="display:inline-block; width:75%;">
            <h5 class="question"></h5>
        </div>
        <div class="up-vote" style="display:inline-block; float:right; width:25%; text-align:center;">
            <button type="button" class="btn btn-lg btn-primary knapp"><div class="arrow-up"/></button>
            <h5 class="upvotes"></h5>
        </div>
    </div>
</div>

function insertPost(){
    var obj, dbParam, xmlhttp, top_quest;
    // *** Grab the parent element just once, no need to keep looking it up in the loop
    top_quest = document.getElementById("top_quest");
    obj = { "table":"text", "limit":15 };
    dbParam = JSON.stringify(obj);
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
          var myObj = JSON.parse(this.responseText);
          Object.keys(myObj).forEach(function(key) {
              var entry = myObj[key];
              // Get the first .questbox and clone it
              var clone = top_quest.querySelector(".questbox").cloneNode(true);
              // Set the question and upvotes
              clone.querySelector(".question").innerHTML = entry.text;
              clone.querySelector(".upvotes").innerHTML = entry.upvotes;
              // Append the clone at the top
              top_quest.insertBefore(clone, top_quest.firstChild);
          });
      }
    };
    xmlhttp.open("GET", "getPostsForLecture.php?q=", true);
    xmlhttp.send();
}