为何数组内容更新后页面未同步渲染？

问题根源 #

你的代码只在页面加载时执行了一次数组循环，把初始的三个元素渲染到页面。当点击按钮向数组ob中添加新值后，并没有把新元素插入到DOM的逻辑，所以页面不会自动同步数组的变化。

解决方案1：只渲染新添加的元素（高效推荐） #

修改add函数，在向数组push新值后，直接把新元素插入到列表容器中，同时可以清空输入框提升体验：

const ob = ["first", "second", "third"];
// 提前获取DOM元素，避免重复查询
const nameList = document.querySelector(".name-list");
const inputTextarea = document.querySelector("textarea");

// 初始化渲染初始列表
for (let i = 0; i < ob.length; i++) {
  const nametag = `<p>${ob[i]}</p>`;
  nameList.insertAdjacentHTML("beforeend", nametag);
}

function add() {
  const value = inputTextarea.value.trim();
  if (value) {
    ob.push(value);
    // 将新元素插入到页面列表
    const newNametag = `<p>${value}</p>`;
    nameList.insertAdjacentHTML("beforeend", newNametag);
    // 清空输入框
    inputTextarea.value = "";
  }
}

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

HTML保持不变：

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

解决方案2：重新渲染整个列表（适合需要同步数组全量状态的场景） #

如果后续需要对数组做排序、过滤等操作，可封装一个渲染函数，每次数组变化后重新渲染全部元素：

const ob = ["first", "second", "third"];
const nameList = document.querySelector(".name-list");
const inputTextarea = document.querySelector("textarea");

// 封装渲染函数
function renderNameList() {
  // 先清空现有内容，避免重复渲染
  nameList.innerHTML = "";
  ob.forEach(item => {
    const nametag = `<p>${item}</p>`;
    nameList.insertAdjacentHTML("beforeend", nametag);
  });
}

// 初始化渲染
renderNameList();

function add() {
  const value = inputTextarea.value.trim();
  if (value) {
    ob.push(value);
    // 调用渲染函数更新页面
    renderNameList();
    inputTextarea.value = "";
  }
}

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

内容的提问来源于stack exchange，提问作者Vivek Rai