如何在javascript而不是jquery中添加动态列表答案

【问题标题】：How to add dynamic lists in javascript not jquery如何在javascript而不是jquery中添加动态列表
【发布时间】：2016-05-11 15:18:01
【问题描述】：

我的数据是

var response = '[{"id":1,"name":"Web Demo"},{"id":2,"name":"Audio Countdown"},{"id":3,"name":"The Tab Key"},{"id":4,"name":"Music Sleep Timer"}]';
var obj = JSON.parse(response);

那么我如何动态添加列表项，如果将来后端的列表项增加，应该直接添加它们，以及如何链接动态和静态元素。

谢谢

【问题讨论】：

与连接？请添加添加的数据的外观
它应该看起来像 Web Demo Audio Countdown 等...
动态地你会像静态一样获得数据???
我有上面给出的 json 数据，假设如果在 json 数据中修改了 50 个项目，我如何在不单击按钮的情况下将整个列表作为 html 页面中的列表

标签： javascript list

var response = [{"id":1,"name":"Web Demo"},{"id":2,"name":"Audio Countdown"},{"id":3,"name":"The Tab Key"},{"id":4,"name":"Music Sleep Timer"}] ; for (i = 0; i < response.length; i++) { var node = document.createElement("LI"); // Create a <li> node var textnode = document.createTextNode(response[i].name); // Create a text node node.appendChild(textnode); document.getElementById("items").appendChild(node); ///append Item }

【解决方案2】：

如果您想根据后端的更改更改列表，则应定期通过 ajax 进行测试。您可以使用setInterval 和 XMLHttpRequest 用于这些目的。

当新数据到达时，您应该删除现有列表并添加新元素以动态表示到达的数据。

setInterval(function(){

  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {

     populateList(xhttp.responseText);   //This is your function to create the list

    }
  };

  xhttp.open("GET", "http://www.mybackend.com/list", true);
  xhttp.send();

})

您可以使用document.createElement 函数创建一系列元素来表示您的数据。

function populateList(data) {

   var obj = var obj = JSON.parse(response);

   document.getElementById('myUl').remove();    //Delete the existing list

   var myUi = document.createElement('ul');    //Add new list

   obj.forEach(item) {

       var listItem = document.createElement('li');
       myUi.appendChild(li);

       //Then add li details here
   } 

}

这只是粗略的代码。你可以用 Jquery 来完成这件事，比这更短。您甚至可以使用 Angular 之类的 JS 框架来自动执行大部分任务。

【讨论】：

【解决方案3】：

如果您像静态数据一样存储动态数据，请使用 concat

response.concat(dynamicdata);

【讨论】：