JavaScript Application Design method to cut down on code

I am building a Project Management Application. A key feature is that Project Task records are shown in Task Lists and can be opened into a Task Modal to view all data for a Task.

This is one of my first large scale JavaScript projects as I have always been a backend PHP developer. So far it is really fun learning and using JavaScript on a larger project like this!

I have a quick questions about a design choice for some JavaScript code.

When a Task record is opened into a Task Modal window, all fields have edit-in-place capability to update the Task record.

Onecs a Task Field is updated, it has to save to the backend with AJAx but then obviously it must also Update the DOM HTML to reflect the new value in the Task Modal and also in the Task List that is shown behind/under the Task Modal window.

So simplify this, I had the idea of making some nice utility and structured code to make those DOM updates like this code below...

(NOTICE: all non relevant code removed for this question/demo)

To briefly describe the code below, inside my main projectTaskModal object which is the whole Task Modal application module.

I have an Object called updateDom. inside of that Object is 2 more Objects...

• taskListDom
• taskModalDom

Under both those objects taskListDom & taskModalDom are all the functions similar to this updateTaskListDateModified: function(dateTime) which would be used to update the HTML in the DOM in the Task list and in the Task Modal for each Task Field.

var projectTaskModal = {

    // Update Task Fields in the DOM
    updateDom: {

        // Update Task List Fields in the DOM
        taskListDom: {

            updateTaskListDateModified: function(dateTime) {
                // update Task List Date Modified Field
            },

            updateTaskListTitle: function(taskTitle) {
                // update Task List Title Field
            },

            updateTaskListStatus: function(taskStatus) {
                // update Task List Status Field
            },

            updateTaskListPriority: function(taskPriority) {
                // update Task List Priority Field
            },

            updateTaskListTags: function(taskTags) {
                // update Task List Tags Field
            },

            updateTaskListDescription: function(taskDescription) {
                // update Task List Description Field
            },

            updateTaskListAssignedUser: function(taskAssignedUser) {
                // update Task List AssignedUser Field
            },

            updateTaskListDueDate: function(taskDueDate) {
                // update Task List DueDate Field
            },

            updateTaskListMilestone: function(taskMilestone) {
                // update Task List Milestone Field
            }
        },


        // Update Task Modal Fields in the DOM
        taskModalDom: {

            updateTaskModalDateModified: function(dateTime) {
                // update Task Modal Date Modified Field
            },

            updateTaskModalTitle: function(taskTitle) {
                // update Task Modal Title Field
            },

            updateTaskModalStatus: function(taskStatus) {
                // update Task Modal Status Field
            },

            updateTaskModalPriority: function(taskPriority) {
                // update Task Modal Priority Field
            },

            updateTaskModalTags: function(taskTags) {
                // update Task Modal Tags Field
            },

            updateTaskModalDescription: function(taskDescription) {
                // update Task Modal Description Field
            },

            updateTaskModalAssignedUser: function(taskAssignedUser) {
                // update Task Modal AssignedUser Field
            },

            updateTaskModalDueDate: function(taskDueDate) {
                // update Task Modal DueDate Field
            },

            updateTaskModalMilestone: function(taskMilestone) {
                // update Task Modal Milestone Field
            }
        },

    },

}

---

Now above is the long expanded way. Below is the simple much less code method...

Since the functions inside of both my objects taskListDom and taskModalDom are basically the same as they have similar methods for updating the HTML for all Task fields in the Task List and Task Modal. Because of this, all that code above could be compressed into a single function or 2 like this below instead...

var projectTaskModal = {

    // Update Task Fields in the DOM
    updateDom: {

        updateTaskField: function(ListOrModal, taskField, fieldValue) {

            // ListOrModal will indicate if we are updating the Task
            //  Field in the DOM for the List or the Modal HTML

            // taskField will indicate the actual Task Filed we are 
            // updating the DOM HTML for.

            // fieldValue will be the value to set in the Task filed HTML
        },

    }

}

Now I understand this might seem like a silly questions since we are talking about 100+ lines vs 20 lines to accomplish the same task.

I just really am curious though in the JavaScript world, which of these 2 methods would be prefered in a large scale project?