如何在不刷新页面的情况下更新我的arraylist？

Question

我已经实现了一个简单的程序，称为foodlist，它是一个数组列表。我曾经通过ajax添加食品列表。一切正常。但是我想在将食物插入数组时更新列表项。 这是我的app.js文件

app.post('/add', (req, res) => {
    console.log(req.body.item); 
    foods.push(req.body.item);
    console.log(foods);
    res.render('index',{order:foods});
});

index.ejs

<form >
    <input type="text" name="game" id="title">
    <input type="submit">
</form>

<span id="succ_msg"></span><br>

<% if(typeof order !== "undefined") {
    for (var i = 0; i< order.length; i++) { %>
    <div id="champ">
        <span><%= order[i] %></span>
    </div>
<% } }%>

<script>
$(document).ready(function() {
    $('form').on('submit', function(e) {
        e.preventDefault();
        var title = $('#title').val();
        $.ajax({
            method: 'POST',
            url: '/add',
            data: {
                item: title
            },
            success: function(result) {
                $('#title').val("");
                $('#succ_msg').html("Success");
                setInterval(function() {
                    $('#champ').load() //here is my problem
                }, 1000);
            },
            error: function() {
                console.log('Error');
            }
        });
    });
});
</script>

任何想法