WordPress自定义JS插入动态消息返回<p> </p>问题咨询

• DOM加载时机错误：如果脚本被插入到页面<head>区域，执行时页面主体的.entry-content元素还未渲染完成，节点操作无法正常生效，最终生成的p标签会出现内容丢失的问题。
• DOM节点复用错误：你仅创建了1个para节点，就通过循环尝试插入到所有.entry-content元素中。同一个DOM节点在文档树中只能存在一个位置，重复执行appendChild会反复移动该节点，操作异常时就会出现内容被替换为 的情况。

调整脚本逻辑，等待DOM完全加载后再执行，且每次插入都单独创建新的p节点，修正后的代码如下：

document.addEventListener('DOMContentLoaded', function() {
    function getUrlParameter(name) {
        name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
        var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
        var results = regex.exec(location.search);
        return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
    }

    const message = getUrlParameter('message');
    if(message) {
        document.querySelectorAll('.entry-content').forEach(element => {
            const para = document.createElement("p");
            // 可选：添加类名方便自定义样式
            para.classList.add('url-message-tip');
            const node = document.createTextNode(message);
            para.appendChild(node);
            // 若要将提示放在内容最前面，替换为 element.prepend(para)
            element.appendChild(para);
        })
    }
})

额外配置建议 #

• 在「Header and Footer Scripts」插件的设置中，将该脚本插入位置选择为「页脚（Footer）」，进一步避免DOM加载时机问题。
• 检查插件是否开启了脚本内容转义功能，如有开启请关闭，避免代码中的特殊字符被自动替换导致逻辑失效。

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