如何制作切换按钮增删DOM中的div及解决Word导出异常问题？

看起来你遇到的问题应该是移除div后导出Word，文档里依然残留已移除的div内容——这大概率是因为jquery.wordexport.js内部对目标内容做了临时缓存，或者你的移除操作没有彻底清理DOM，导致导出逻辑还是抓取到了旧的DOM节点。

下面是几个针对性的解决思路：

1. 确保移除操作彻底清理DOM #

先检查你的添加/移除切换代码，确保是真正从DOM中删除元素，而不是仅仅隐藏（比如用display:none）。正确的移除方式应该是：

// 示例切换逻辑：确保移除时彻底删除DOM节点
$('#toggleDivBtn').click(function() {
  const targetDiv = $('#myDynamicDiv');
  if (targetDiv.length) {
    // 彻底删除DOM节点，而非隐藏
    targetDiv.remove(); 
  } else {
    // 添加新div
    $('body').append('<div id="myDynamicDiv">动态添加的内容</div>');
  }
});

如果之前用的是hide()，导出工具依然能抓取到隐藏的DOM元素，所以必须用remove()（彻底删除）或detach()（如需后续复用节点）。

2. 强制刷新导出时的内容快照 #

jquery.wordexport.js的默认逻辑可能会缓存目标容器的HTML内容，你可以修改导出按钮的点击事件，每次导出前重新获取最新的DOM内容，避免依赖插件缓存：

$('#exportBtn').click(function() {
  // 实时获取目标容器的最新HTML
  const freshContent = $('#exportContainer').html();
  // 创建临时容器注入最新内容
  const tempContainer = $('<div>').html(freshContent);
  // 对临时容器执行导出
  tempContainer.wordExport('导出文档');
  // 导出完成后清理临时容器
  tempContainer.remove();
});

这种方式每次导出都基于当前最新的DOM状态，从根源上避免缓存问题。

3. 修改jquery.wordexport.js的核心逻辑（若上述方法无效） #

打开jquery.wordexport.js，找到抓取内容的核心代码（通常是var content = $(selector).html();这类语句），确保它是在点击导出时实时获取内容，而非提前缓存。比如把插件内的内容获取逻辑修改为：

$.fn.wordExport = function(fileName) {
  // 每次调用都实时获取当前元素的最新HTML
  var content = this.html(); 
  // 后续的Word导出逻辑...
};

4. 调试验证DOM状态 #

如果还是不确定问题所在，可以在导出前加调试步骤，确认目标容器的内容确实是空的：

$('#exportBtn').click(function() {
  console.log('当前导出容器内容:', $('#exportContainer').html());
  // 再执行导出操作
  $('#exportContainer').wordExport('导出文档');
});

如果控制台显示内容为空，但导出文档仍有残留，那肯定是插件的缓存问题，用方法2或3即可解决。

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