Как обновить div с помощью JavaScript?

Question

Я пытаюсь настроить обновление на div после того, как массив объектов получил необходимые входные данные и был отправлен для отображения. До сих пор я сделал это:

var users = [ 
    {name: "John Smith", description: "Some chap", image: "None"}, 
    {name: "Elizabeth II", description: "A fancy lass", image: "None"} 
    ]; 

    function arrayAdd() { 
    var title_text = $("#title_text").val(); 
    var description_text = $("#description_text").val(); 
    var image_text = $("#image_text").val(); 

    users.push({name:title_text,description:description_text,image:image_text}); 
    console.log(users); 

    for (var i = 0; i <= users.length; i++) { 
     $("#users").html(users[i]['name']); 
    }; 
    } 

Но это только показывает, добавил последнее значение, пожалуйста, вы можете показать мне способ починить это?

Answer 1

Ваш текущий код переписывает весь HTML-элемент на каждой итерации, поэтому видна только последняя. Изменить это:

$("#users").html(users[i]['name']); 

To:

$("#users").append(users[i]['name']); 

Answer 2

Попробуйте это, в течение цикла вы используете HTML, он заменяет все внутри этого элемента используют .append() вместо

$('#users').append(users[i]['name']); 

Answer 3

Изменение html в append. Вы очищаете HTML на каждой итерации.