使用jQuery在window加载时添加<p>元素无效，控制台运行正常求助

你遇到的问题核心是：页面加载完成后脚本找不到目标元素，但控制台手动执行却能成功，这说明脚本执行时目标元素还未存在于DOM中，常见原因和解决方式如下：

可能的原因 #

• 目标元素.quick-book-pc是动态生成的：比如通过AJAX请求加载、其他JS脚本渲染生成，这类元素不会在window.load事件触发时出现在DOM里，自然无法被选中。
• 脚本执行时机和元素加载顺序不匹配：虽然用了window.load，但如果生成.quick-book-pc的脚本是在window.load之后才运行的，那你的代码执行时元素还没被创建。

解决办法 #

1. 将代码放在目标元素生成之后执行
   找到负责渲染.quick-book-pc的脚本，把你的前置添加代码放在它的执行完成回调里。比如如果是AJAX加载：

   // 假设这是生成目标元素的AJAX请求
   $.ajax({
     url: 'xxx',
     success: function(data) {
       // 渲染元素的代码
       $('.container').html(data);
       // 在这里执行你的代码
       $(".quick-book-pc").prepend("<p>prepended paragraph</p>");
     }
   });
   

2. 使用MutationObserver监听元素添加
   如果你无法修改生成元素的脚本，可以用MutationObserver监听DOM变化，当目标元素出现时再执行代码：

   $(window).on('load', function() {
     const observer = new MutationObserver(function(mutations) {
       const target = $(".quick-book-pc");
       if (target.length > 0) {
         target.prepend("<p>prepended paragraph</p>");
         observer.disconnect(); // 找到元素后停止监听
       }
     });
     // 监听整个文档的DOM变化
     observer.observe(document.body, { childList: true, subtree: true });
   });
   

3. 调试确认元素存在性
   可以在脚本里加调试代码，确认执行时元素是否存在，方便排查问题：

   $(window).on('load', function() {
     console.log($(".quick-book-pc").length); // 输出0说明元素此时不存在
     if ($(".quick-book-pc").length > 0) {
       $(".quick-book-pc").prepend("<p>prepended paragraph</p>");
     }
   });
   

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