How to append a new item without re-rendering the items that were already there

I’m using Ajax to consume a simple API that lists all my tasks and I can add new items to the list. The problem is that everytime I append a new item to the ul the others all items “disappear” quickly, practically blinking. I just want to append the new item in the end of the ul without needing to re-render all items so the previous things listed won’t blink.

My html:

<h1>All tasks</h1>
    <ul id="items">
    </ul>
    
    <form method="POST">
        <label for="title">Insert a new task</label>
        <input type="text" name="title">
        <button type="submit" id="submit">Submit</button>
    </form>

My JS:

$.ajax({
    url: "http://localhost:4000/todo",
    contentType: "application/json",
    dataType: 'json',
    success: function(result){
        for(let i = 0; i < result.list.length; i++){
            $('#items').append(`<li>${result.list[i].title}</li>`);
        }
    },
    error: function(result){
        console.log('Error');
    }
});


$("#submit").click(function() {
    $.post("http://localhost:4000/todo", {
        title : $('input[name="title"]').val()
    }, function(){
        $('#items').append('<li>' + $('input[name="title"]').val() + '</li>');
    });

});