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

How to add dynamic lists in javascript not jquery

本文关键字：jquery 添加 动态 列表 javascript      更新时间：2023-09-26

Am的数据为

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);

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

感谢

使用js appendChild在html中附加每个项目，如下所示。。。

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
}	
<div id="items"></div>

如果您想根据后端的更改来更改列表，您应该定期通过ajax进行测试。您可以使用setInterval和CCD_ 3。

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

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框架来自动化这些任务。

如果将动态数据存储为静态数据，请使用concat

response.concat(dynamicdata);
相关文章：