Our task in this lesson is to insert a new task at the end of the list when the submit button is clicked.

Do note however that every task is composed of the task title, and couple of button element as well.

First lets take a look at the finish app. Input a new task and click the submit button to see the output.

Take a look at the HTML we have to create for each newly added task.

<li id="${id}" class="task-item" data-complete="true">
    <header class="task-title">${inputTitle.value}</header>
    <button class="task-delete-button">x</button> 
    <button class="task-options-button">☰</button> 
</li>

‘To achieve this we will do the following steps.

• Get the <ul> element – document.querySelector
• Handle submit button click – documnt.querySelector + addEventListener
• Grab the input and build the html string for the task document.getElementsByName(“task-title”)[0] (note: here we are using getElementsByName which returns an array and we grab the first one. You can also use querySelector with attribute selector as well.
• Generate the ID (in production app, this ID will be generated in the backend). (+new Date() -> Returns the current date+time in numeric format). Good for demo purposes.
• Use the insertAdjacentHTML to add the newly created task at the end of the list.

The insertAdjacentHTML

The insertAdjacentHTML() method of the Element interface parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position. It does not reparse the element it is being used on, and thus it does not corrupt the existing elements inside that element. This avoids the extra step of serialization, making it much faster than direct innerHTML manipulation.

Syntax

element.insertAdjacentHTML(position, text);

Parameters

positionA DOMString representing the position relative to the element; must be one of the following strings:

• 'beforebegin': Before the element itself.
• 'afterbegin': Just inside the element, before its first child.
• 'beforeend': Just inside the element, after its last child.
• 'afterend': After the element itself.

textThe string to be parsed as HTML or XML and inserted into the tree

Let us now translate the above requirements into code. It’s quite easy to apply now.

const btnSubmit = document.querySelector("#btnSubmit");
const inputTitle = document. getElementsByName("task-title")[0];
const taskList = document.querySelector("#task-list");

btnSubmit.addEventListener("click", (e) => {
  e.preventDefault();
  let id = +new Date(); // This will be generated from the server
  let taskItem = `
      <li id="${id}" class="task-item" data-complete="true">
        <header class="task-title">${inputTitle.value}</header>
        <button class="task-delete-button">x</button> 
        <button class="task-options-button">☰</button> 
      </li>
  `;
  
  taskList.insertAdjacentHTML('beforeend', taskItem);
});

The source code for practice is at

https://codepen.io/rajeshpillai/pen/YzyvpQo

Conclusion: The insertAdjacentHTML is quite powerful and you can use the “position” parameter to insert HTML at various positions with the DOM structure.