WordPress中用jQuery追加SCRIPT标签触发TypeError错误求解决方案

问题场景 #

在基于WordPress的网站中，使用jQuery 3.6.0 + jQuery.migrate，执行以下代码时会抛出异常：

jQuery('body').append('<script>console.log("test")</script>');

错误提示：

Uncaught TypeError: n.head.appendChild(...) is undefined

问题根源 #

jQuery在处理HTML字符串里的<script>标签时，会默认把脚本插入到document.head中，而非直接追加到目标元素内。如果代码执行时机过早（比如DOM还未完全加载完成），或者jQuery.migrate的兼容逻辑干扰了这个过程，就会导致appendChild调用失败，触发上述错误。

可行解决办法 #

1. 用原生DOM API插入脚本 #

绕开jQuery对script标签的特殊处理，直接用原生JS创建并插入脚本：

const script = document.createElement('script');
script.textContent = 'console.log("test")';
document.body.appendChild(script);

2. 确保DOM完全加载后执行代码 #

把脚本插入逻辑放在DOMContentLoaded回调里，或者借助WordPress的加载机制确保在jQuery加载完成后执行：

jQuery(document).ready(function($) {
  const script = $('<script>').text('console.log("test")');
  $('body').append(script);
});

3. 使用jQuery.getScript加载脚本 #

如果是外部脚本，用getScript更稳妥，还能处理加载成功/失败的情况：

jQuery.getScript('/path/to/your/script.js')
  .done(() => console.log('脚本加载成功'))
  .fail((_, __, err) => console.error('加载失败:', err));

4. 临时禁用jQuery.migrate排查 #

如果怀疑是migrate的兼容逻辑导致的问题，可以暂时移除它测试。在主题的functions.php中添加以下代码：

add_action( 'wp_default_scripts', function( $scripts ) {
    if ( isset( $scripts->registered['jquery'] ) ) {
        $scripts->registered['jquery']->deps = array_diff( $scripts->registered['jquery']->deps, array( 'jquery-migrate' ) );
    }
} );

注意：禁用前要确认网站其他功能不依赖jQuery.migrate的兼容代码。

内容的提问来源于stack exchange，提问作者a-coder