如何在JavaScript对象属性变更后更新div内容？

你的核心问题是：修改data对象属性后，没有触发DOM的重新渲染，导致页面内容未同步变化。现有替换子元素的方法可行，但以下几种方案更简洁、易维护：

方案1：封装渲染函数，数据变更时重执行 #

把渲染DOM的逻辑抽成独立函数，初始化和数据变更时都调用它。不管哪个属性修改，都能统一更新页面，代码复用性更强：

change data name:
<input id="text">

<button id="btn">change</button>
<div id="content"></div>
<script>
  const search = document.getElementById('text');
  const btn = document.getElementById('btn');
  const div = document.getElementById('content');

  const data = {
    id: '1',
    name: 'element name',
    inStock: true
  }

  // 封装渲染逻辑
  function renderData() {
    div.innerHTML = `
      <div>id of the data: ${data.id}</div>
      <div>name of the data: ${data.name}</div>
      <div>is in stock: ${data.inStock}</div>
    `;
  }

  // 初始化渲染
  renderData();

  btn.addEventListener('click', () => {
    data.name = search.value;
    // 数据更新后重新渲染
    renderData();
  })
</script>

方案2：精准更新单个目标元素 #

如果只需要更新name对应的内容，给该元素加唯一ID，直接修改其内容即可，无需操作整个父容器或替换子元素，性能更优：

change data name:
<input id="text">

<button id="btn">change</button>
<div id="content">
  <div>id of the data: 1</div>
  <div id="data-name">name of the data: element name</div>
  <div>is in stock: true</div>
</div>
<script>
  const search = document.getElementById('text');
  const btn = document.getElementById('btn');
  const nameElement = document.getElementById('data-name');

  const data = {
    id: '1',
    name: 'element name',
    inStock: true
  }

  btn.addEventListener('click', () => {
    data.name = search.value;
    // 直接更新目标元素的文本内容
    nameElement.textContent = `name of the data: ${data.name}`;
  })
</script>

方案3：用Proxy自动监听数据变化（进阶） #

如果数据会被多处修改，或者需要实现自动同步，用ES6的Proxy监听对象属性变更，自动触发渲染。这是类似Vue等框架的核心思路，适合复杂场景：

change data name:
<input id="text">

<button id="btn">change</button>
<div id="content"></div>
<script>
  const search = document.getElementById('text');
  const btn = document.getElementById('btn');
  const div = document.getElementById('content');

  // 原始数据
  const rawData = {
    id: '1',
    name: 'element name',
    inStock: true
  }

  // 渲染函数
  function renderData() {
    div.innerHTML = `
      <div>id of the data: ${data.id}</div>
      <div>name of the data: ${data.name}</div>
      <div>is in stock: ${data.inStock}</div>
    `;
  }

  // 创建Proxy监听数据变更
  const data = new Proxy(rawData, {
    set(target, prop, value) {
      target[prop] = value;
      // 属性修改后自动触发渲染
      renderData();
      return true;
    }
  })

  // 初始化渲染
  renderData();

  btn.addEventListener('click', () => {
    // 修改数据时自动同步DOM
    data.name = search.value;
  })
</script>

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