在 JavaScript 中创建新的 HTML 元素会在 WordPress 中出错答案

【问题标题】：Creating New HTML Elements in JavaScript get error in WordPress在 JavaScript 中创建新的 HTML 元素会在 WordPress 中出错
【发布时间】：2021-08-26 15:24:27
【问题描述】：

我想在 wordpress 页面的元素中显示一条消息（如果 url 中的参数“消息”有一个值）。为此我安装了“页眉和页脚脚本”插件。并在“插入脚本到"：

<script>
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, ' '));
};

if(getUrlParameter('message'))
{
const para = document.createElement("p");
const node = document.createTextNode(getUrlParameter('message'));
para.appendChild(node);

const element = document.getElementsByClassName("entry-content");
element.appendChild(para);

}
</script>

但不工作。并得到错误：

?message=ثبت انجام شد:291 Uncaught TypeError: element.appendChild 不是函数在 ?message=ثبت انجام شد:291

注意：我使用嵌入代码插件而不是“页眉和页脚脚本”插件。我的问题已经解决了。

【问题讨论】：

您似乎遇到了一些错误，请检查您的控制台。
哦，是的，我编辑了我的问题。
是的，这正是我所期望的。 getElementsByClassName 返回一个集合而不是单个元素。所以你需要通过element[0].appendChild(para);或者你需要的任何索引来访问它的内容

标签： javascript html wordpress

【解决方案1】：

element = document.getElementsByClassName("entry-content") 返回元素的节点列表，而不是单个元素。因此调用 element.appendChild(para) 将不起作用。

您需要遍历此节点列表。一种可能的方法是使用 QuerySelectorAll 而不是 getElementsByClassName ：

document.querySelectorAll('.entry-content').forEach(element => {
    element.appendChild(para);

})

【讨论】：

thanks.error 已修复。但输出为空：