无法修改HTML时，动态元素的预览/全文切换逻辑问题

问题根源 #

原代码只在目标元素首次加载时执行了一次DOM更新，点击切换链接时虽然修改了isPreview的值，但没有触发重新计算并更新DOM的逻辑，所以界面完全没变化。另外直接在onclick字符串里引用全局变量，还容易踩作用域的坑。

修复方案（闭包+封装切换逻辑） #

利用闭包保存原始完整文本和目标元素，把切换逻辑封装成函数，每次点击都重新渲染DOM：

// 补全waitForElm的标准实现（如果你的版本一致可直接复用）
function waitForElm(selector) {
  return new Promise(resolve => {
    if (document.querySelector(selector)) {
      return resolve(document.querySelector(selector));
    }
    const observer = new MutationObserver(mutations => {
      const targetElm = document.querySelector(selector);
      if (targetElm) {
        observer.disconnect();
        resolve(targetElm);
      }
    });
    observer.observe(document.body, { childList: true, subtree: true });
  });
}

let isPreview = true;
waitForElm(".div_with_html").then((elm) => {
  // 保存原始完整内容，避免后续被覆盖丢失
  const fullBio = elm.innerHTML;

  // 封装切换和渲染逻辑
  function toggleAndRender() {
    isPreview = !isPreview;
    const linkText = isPreview ? "显示更多" : "收起";
    const preview = fullBio.substr(0, 450) + `... <a href="javascript:void(0)">${linkText}</a>`;
    
    // 更新DOM
    elm.innerHTML = isPreview ? preview : fullBio;
    // 重新绑定点击事件（innerHTML替换后原链接会被销毁）
    elm.querySelector('a').addEventListener('click', toggleAndRender);
  }

  // 初始化渲染预览状态
  toggleAndRender();
});

更优的无重复绑定版本 #

如果不想每次更新DOM后都重新绑定事件，可以单独创建链接元素并复用，避免替换整个innerHTML：

waitForElm(".div_with_html").then((elm) => {
  const fullBio = elm.innerHTML;
  const previewText = fullBio.substr(0, 450);
  // 单独创建链接元素，只初始化一次
  const linkEl = document.createElement('a');
  linkEl.href = 'javascript:void(0)';

  // 封装内容更新逻辑
  function updateContent() {
    linkEl.textContent = isPreview ? "显示更多" : "收起";
    if (isPreview) {
      elm.innerHTML = previewText + '... ';
      elm.appendChild(linkEl);
    } else {
      elm.innerHTML = fullBio;
      elm.appendChild(linkEl);
    }
  }

  // 绑定点击事件，仅执行一次
  linkEl.addEventListener('click', () => {
    isPreview = !isPreview;
    updateContent();
  });

  // 初始化渲染
  updateContent();
});

关键改进点 #

• 用闭包锁住fullBio，确保始终能拿到原始的完整文本，不会被预览内容覆盖
• 把切换逻辑封装成函数，每次点击都重新计算并更新DOM
• 用addEventListener替代字符串形式的onclick，避免转义麻烦和作用域问题
• 第二个方案复用链接元素，减少DOM操作次数，性能更优

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