有沒有辦法只周期性地更新 <div> 純Java內容？

Question

我使用的是div，其中包含<li>元素，在其中添加了一些動態創建的元素（localStorage鍵更加具體）。 我想每隔“ x”秒更新一次<div> ，但只更新<div> ，而不更新整個頁面。 我知道可以用Ajax和JQuery（ $( "#here" ).load(window.location.href + " #here" ); ）完成。

但是有什么辦法可以做到純白嗎？

UPDATE

具體情況是，im選擇了所有本地存儲鍵並將它們附加到div內的列表中。 當我這樣使用（window.onload）時，它工作正常。 但是我想周期性地更新它。 如果我使用“ setinterval”或按鈕來調用該函數，則先前的鍵會重復追加。 （例如：文件1 ....然后：文件1，文件1文件2 ...然后：文件1文件1文件2文件1文件1文件1文件2文件3）

window.onload = function cargararchivos() {
    localstorage = []
    var keys = Object.keys(localStorage);
    for (let i = 0; i < keys.length; i++) {
    var elemento_lista = document.createElement('li')
    elemento_lista.innerHTML = keys[i]
    var lista = document.getElementById('lista_archivos')
    lista.appendChild(elemento_lista)
    localstorage[ keys[i] ] = localStorage.getItem( keys[i] )

    elemento_lista.onclick = function() 
    {alert(JSON.parse(localStorage[keys[i]]))}}
}; 

Answer 1

可以使用setInterva l函數來完成。 在預定的時間后，它將執行您選擇的功能。

為此，您的DIV必須具有唯一的ID，因此我們可以使用Javascript的getElementById（）方法進行訪問。

這是一個簡單的示例，該示例每1000毫秒用當前時間更新一個div：

 function update() { document.getElementById("myDiv").innerHTML = new Date(); } var interval = setInterval(update, 1000); 

 <div id="myDiv"> </div> 

Answer 2

您的方法第一次起作用，但之后卻不起作用的原因是因為該方法添加了DOM節點。 在第二次調用之后，您將看到第一次調用和第二次調用中的 DOM節點。 在第三個調用之后，您將看到第一個，第二個和第三個調用中的節點...依此類推。

如果要重復調用像cargararchivos（）這樣的方法來添加DOM節點，則必須首先刪除以前添加的所有DOM元素。 我已經更新了您的代碼，假設lista_archivos開始為空（沒有子元素）：

function cargararchivos() {
    localstorage = []
    var keys = Object.keys(localStorage);
    var lista = document.getElementById('lista_archivos')

    // Ensure any previously added DOM nodes are removed.
    while (lista.firstChild) {
        lista.removeChild(lista.firstChild);
    }

    for (let i = 0; i < keys.length; i++) {
        var elemento_lista = document.createElement('li')
        elemento_lista.innerHTML = keys[i]

        lista.appendChild(elemento_lista)
        localstorage[ keys[i] ] = localStorage.getItem( keys[i] )

        elemento_lista.onclick = function() 
        {alert(JSON.parse(localStorage[keys[i]]))}
    }
};