div加载时移除内部所有p标签代码失效问题求助

开发者阿泽

2026-5-20

问题分析与解决方案

兄弟，你这代码的核心问题是用错了jQuery的.load()方法！

为什么原代码不行？

jQuery的$(selector).load()方法是用来通过AJAX请求加载远程HTML内容并插入到目标元素里的，它根本不是用来监听元素自身加载完成的事件。你想用它等待story_L3加载完成，这完全是用错了API，自然不会生效。

针对不同场景的解决方案

根据story_L3是静态存在还是动态加载的，分两种情况处理：

场景1：`story_L3`是页面初始就有的静态元素

直接等DOM渲染完成后执行文本提取操作就行，用$(document).ready()或者把脚本放在页面底部：

$(document).ready(function() {
  const $storyDiv = $('#story_L3');
  // 收集所有p标签里的纯文本，用空格拼接
  const pureText = $storyDiv.find('p').map(function() {
    return $(this).text();
  }).get().join(' ');
  // 清空div原有内容，设置纯文本
  $storyDiv.empty().text(pureText);
});

场景2：`story_L3`是动态加载的元素（比如AJAX、其他脚本后添加的）

这种情况需要用MutationObserver监听DOM变化，等元素出现后再执行操作：

// 创建观察者实例
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    const $storyDiv = $('#story_L3');
    if ($storyDiv.length > 0) {
      // 提取纯文本并替换内容
      const pureText = $storyDiv.find('p').map(function() {
        return $(this).text();
      }).get().join(' ');
      $storyDiv.empty().text(pureText);
      observer.disconnect(); // 找到目标元素后停止监听，避免重复执行
    }
  });
});

// 开始监听body及其子元素的变化
observer.observe(document.body, {
  childList: true,
  subtree: true
});