why change in array is not reflecting in the page

Question

I am trying to add data in the array on clicking the button and its happening too and I am using loop over array to show data on the page from array but when the data is added to array is does not on the page. Change is not reflecting on the page.

const ob = ["first", "second", "third"];

for (let i = 0; i < ob.length; i++) {
  const nametag = `<p>${ob[i]}</p>`;
  document.querySelector(".name-list").insertAdjacentHTML("beforeend", nametag);
}
function add() {
  const value = document.querySelector("textarea").value;
  ob.push(value);
}
document.querySelector(".add").addEventListener("click", () => add());

<div class="name-list"></div>
<textarea placeholder="enter name"></textarea><br>
<button class="add">Add Name</button>

Answer 1

You have to update the HTML to add name on clicking the button. You can use insertAdjacentHTML() to update the DOM like the following way:

const ob = ["first", "second", "third"];

for (let i = 0; i < ob.length; i++) {
  const nametag = `<p>${ob[i]}</p>`;
  document.querySelector(".name-list").insertAdjacentHTML("beforeend", nametag);
}

function add() {
    const value = document.querySelector("textarea").value;

    //update the HTML for the newly added name
    const nametag = `<p>${value}</p>`;
    document.querySelector(".name-list").insertAdjacentHTML("beforeend", nametag);

    //add the new name to the array
    ob.push(value);

    //clear the textarea for the next input
    document.querySelector("textarea").value = "";
  }

document.querySelector(".add").addEventListener("click", () => add());

<div class="name-list"></div>
<textarea placeholder="enter name"></textarea><br>
<button class="add">Add Name</button>

Answer 2

There's no link between JS arrays and your page. You should add the HTML yourself. One way it's to add reactivity to your array with Proxy. Once you push to it, the HTML will be added automatically:

const ob = new Proxy([], {
  get(arr, prop){
    if(prop === 'push') return function(...args){
      const out = arr.push(...args);
      for(const text of args){
        const nametag = `<p>${text}</p>`;
        document.querySelector(".name-list").insertAdjacentHTML("beforeend", nametag);
      }
      return out;
    }
    return Reflect.get(...arguments);
  }
});

ob.push("first", "second", "third");
function add() {
  const value = document.querySelector("textarea").value;
  ob.push(value);
}
document.querySelector(".add").addEventListener("click", () => add());

<div class="name-list"></div>
<textarea placeholder="enter name"></textarea><br>
<button class="add">Add Name</button>

Answer 3

This is because that for-loop is already executed when the new value is being added... For that you need to use the code of adding <p> element in the add() function too

I would suggest making a function Like

function insertPara( word ) { document.querySelector(".name-list").insertAdjacentHTML("beforeend", "<p>"+name+"</p>");}

that takes a word and adds it to your html with proper tags. That you can use inside your loop and in your add() function