Есть ли способ циклически обновлять только содержимое <div>в чистом Javascript?

Question

Я использую div с элементом <li> внутри, где я добавляю некоторые динамически созданные элементы (ключи localStorage, чтобы быть более конкретными). Я хочу обновлять div каждые "х" секунд, но только <div>, а не всю страницу. Я знаю, что это можно сделать с помощью Ajax и JQuery ($( "#here" ).load(window.location.href + " #here" );).

Но есть ли способ сделать это с чистым JS?

UPDATE

Особый случай заключается в том, что я выбираю все ключи localalstorage и добавляю их в список внутри div. Когда я использую как это (window.onload), он работает нормально. Но я хочу обновлять его циклически. Если я использую «setinterval» или кнопку для вызова функции, предыдущие клавиши добавляются повторно. (например: файл 1 .... затем: файл 1, файл 1 файл 2 ... затем: файл 1 файл 1 файл 2 файл 1 файл 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 должен быть уникальный идентификатор, чтобы мы могли получить к нему доступ, используя getElementById () метода Javascript.

Вот простой пример, который обновляет div с текущим временем каждые 1000 миллисекунд:

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