動態創建更新的html列表

Question

我正在嘗試動態創建一個HTML列表，該列表會在收到新信息時更新。 這是我的代碼：

 setlast(); function setlast() { last = [ "xyyxx", "yxyxx", "xxxxy", "yyxxy", "yxyxy"] }; setInterval(function() { last[0] = Math.random(); last[1] = Math.random(); last[2] = Math.random(); last[3] = Math.random(); last[4] = Math.random(); }, 2000); createHtml(); function createHtml() { setTimeout(function(){ ul = document.createElement("ul"); document.body.appendChild(ul); ul.setAttribute("id", "lyl"); for(w=0; w<5; w++) { li = document.createElement("li"); ul.appendChild(li); } updateT(); },3500); } function updateT() { setInterval(function() { li.innerHTML = last[w]; },2000); } 

 #listwrapper { margin-top: 2%; width : 100%; } li { display : inline; float : left; padding : 10px; } 

像上面一樣，我不確定。

如果我像下面那樣做，代碼可以工作，但是每次Math.random生成新數字時，每個li都不會更新。

 setlast(); function setlast() { last = [ "xyyxx", "yxyxx", "xxxxy", "yyxxy", "yxyxy"] }; setInterval(function() { last[0] = Math.random(); last[1] = Math.random(); last[2] = Math.random(); last[3] = Math.random(); last[4] = Math.random(); }, 2000) createHtml(); function createHtml() { setTimeout(function(){ ul = document.createElement("ul"); document.body.appendChild(ul); ul.setAttribute("id", "lyl"); for(w=0; w<5; w++) { li = document.createElement("li"); ul.appendChild(li); li.innerHTML = last[w]; } },3500) } 

 #listwrapper { margin-top: 2%; width : 100%; } li { display : inline; float : left; padding : 10px; } 

所以我的問題是 ：每次生成新號碼時，如何顯示和更新列表？

非常感謝。

Answer 1

這是僅使用pur javascript的工作示例：

 /** * Update The HTML * * @param {Array} last - ensure the array exist by passing it as an argument */ function updateHtml(last) { const ul = document.querySelector('#toUpdate'); // Empty existing li node ul.innerHTML = '' for (let i = 0; i < last.length; i++) { // create and append li elements const li = document.createElement('li') li.innerHTML = last[i] ul.appendChild(li); } } setInterval(function() { // call with random stuff updateHtml([ Math.random(), Math.random(), Math.random(), Math.random(), Math.random() ]) }, 2000) // first call with strings updateHtml([ "xyyxx", "yxyxx", "xxxxy", "yyxxy", "yxyxy" ]); 

 #listwrapper { margin-top: 2%; width: 100%; } li { display: inline; float: left; padding: 10px; } 

 <div id="main"> <ul id="toUpdate"> </ul> </div> 

關於DOM更新，有很多事情要說，但是我所做的大部分工作都是吸引更新功能來專門化它，因此updateHtml根據'last'參數來操縱DOM。

請注意，這是數據綁定的一種方式。 您可以通過使用更復雜的結構和模式（例如Observable）來做更多的事情。

希望對您有所幫助

Answer 2

 setlast(); function setlast() { last = [ "xyyxx", "yxyxx", "xxxxy", "yyxxy", "yxyxy"] }; setInterval(function() { last[0] = Math.random(); last[1] = Math.random(); last[2] = Math.random(); last[3] = Math.random(); last[4] = Math.random(); }, 2000); createHtml(); function createHtml() { setTimeout(function(){ ul = document.createElement("ul"); document.body.appendChild(ul); ul.setAttribute("id", "lyl"); for(w=0; w<5; w++) { li = document.createElement("li"); ul.appendChild(li); } updateT(); },3500); } function updateT() { setInterval(function() { list = ul.childNodes; for (var i = 0; i < list.length; i++) { list[i].innerHTML = last[i]; } },2000); } 

 #listwrapper { margin-top: 2%; width : 100%; } li { display : inline; float : left; padding : 10px; } 

這可行。 筆記：

1. 創建沒有關鍵字let或var變量會使它們成為全局變量，這是一件壞事。 變量應僅在其應有的位置可訪問。 看到這篇文章。
2. 如果last列表中的元素數少於附加到ul的li元素數，則上述代碼將失敗。