WebApp Design: Better way of updating information in a DOM element

Question

Background:
I was working on a personal project to create an Task Checklist Web App. I worked on the code with vanilla golang and javascript. It is a very simple app with limited capability. I've used a json-rpc like endpoints for the application.

Code and Implementations:
Endpoints:

/getTsk GET
/addTsk POST
/delTsk POST

Html implementation of the ajax updated div:

<!-- Pending task loads here -->
<!-- On reload, everything in this div is deleted -->
<!-- The tasks div are then added into this div -->
<div id="pendingTasks"></div>

Ajax Javascript Code to add new task:

function saveTasks(value) {
let request = new XMLHttpRequest();
request.onreadystatechange = function () {
    if (request.readyState == request.DONE) {
        if (request.status === 200) {
            reloadPending(); //If sucessfully added task, then reload the corresponding div
            showAlert("New Task Added.", "alert-success");
        } else {
            showAlert("Failed to Add New Task, Please try again later.", "alert-danger");
        }
    }
};
request.open("POST", ep_prefix + "/addTsk");
request.setRequestHeader("Content-type", "application/json");
request.send(JSON.stringify({ description: value }));
}

Ajax Javascript to reload the div after sucessful addition of task:

function reloadPending() {
let content = document.getElementById("pendingTasks");
content.innerHTML = "";

makeGetRequest("GET", "/getTsks", initPending, showEmptyPending, "?status=0"); //Get all the task from backend again
}

Population of task elements in the div:

//Population of the entries
let fragment = document.createDocumentFragment();
console.log(tasks.length);
for (let i = 0; i < tasks.length; i++) {
    console.log(tasks[i]);
    let taskElements = createTask(tasks[i], "pending");
    fragment.appendChild(taskElements);
}
document.getElementById("pendingTasks").appendChild(fragment);

Problem:
I've implemented my app in such a way that, when a post request is sent to the endpoints, it will only return a success code(http 200) and I will have to make another ajax get request to get the data from the backend and update the DOM element, which causes flickering and is not smooth and also not practical, considering if I have 100 elements i will need to get all those elements again just to add one element.

Question:
How should I design the endpoints or my web application such that the addition of a new task will not require a full reload(Get all task again from backend) and update of the div?

Thank you.

Answer 1

You can "cheat" and just not reload the list of all tasks. I assume that your list of pending tasks looks kind of like this:

[task #N (created 2017-11-21 09:55)] Ask question on SE

What I would do is to just include the task ID (the #N part) in the response generated by the POST request. Then, you would have all the data required to push just this one task to your list of pending tasks - no need to reload them all.

Mind you, I am no expert when it comes to REST API or Web application design, but I generally try to make life easier for myself. If you know that you'll need some data, design your API calls to return it to you. When you call a function (or issue an HTTP request) that creates a resource (a task, in your example) design it to return a resource ID for the thing it just created.

Avoid work when not necessary: if you just added one task, why would you reload them all? This would reduce the flickering, traffic, and delays.