Question

我正在使用一个带有<li>元素的div，在其中添加一些动态创建的元素（更具体的说是localStorage键）。我想每隔“ x”秒更新一次div，但仅更新<div>，而不更新整个页面。我知道可以使用Ajax和JQuery（$( "#here" ).load(window.location.href + " #here" );）来完成。

但是有什么办法可以做到纯白吗？

更新

具体情况是，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]]))}
    }
};

有没有办法以纯Javascript循环更新仅<div>内容？

2 个答案: