Javascript 仅当页面上存在带有类的元素时才加载CSS文件

我试图优化我的CSSS文件加载，因为我加载了一些大型CSS文件的页面上，他们没有使用。只有当某个元素与该页面上的类一起出现时，我才有办法将它们排队

我尝试了以下方法，但不起作用：

jQuery(document).ready(function($) {
    //Script Checkers
    var wowJS = $('.wow');

    if (wowJS.length > 0) {
        $.getScript('/wp-content/themes/gowebsites/gw-addon/js/wow.js', function() {
            new WOW().init();
        });

        var head = document.getElementsByTagName('head')[0];
        var cssNode = document.createTextNode("link");

        cssNode.href = "/wp-content/themes/gowebsites/gw-addon/css/animations.css";
        cssNode.rel = "stylesheet";
        //console.log("CSS Node: "+cssNode); = [object Text]

        head.appendChild(cssNode);
    }
});

我见过一些函数可以将css文件添加到头部，但是没有一个函数允许将其设置为有条件的

EDIT：我刚刚使用了getScripts（）jQuery函数，但是我仍然需要知道如何在需要时将css添加到标题中。

编辑：为供将来参考，这是最终工作代码：

jQuery(document).ready(function($) {
    //Script Checkers
    var wowJS = $('.wow');

    if (wowJS.length > 0) {
        $.getScript('/wp-content/themes/gowebsites/gw-addon/js/wow.js', function() {
            new WOW().init();
        });

        var head = document.getElementsByTagName('head')[0];
        var cssNode = document.createElement("link");

        cssNode.href = "/wp-content/themes/gowebsites/gw-addon/css/animations.css";
        cssNode.rel = "stylesheet";

        head.appendChild(cssNode);
    }
});

---

首先创建节点，然后追加，然后使用

appendChild（）

方法，如：

var scriptNode = document.createElement("script");
scriptNode.src = "/wp-content/themes/gowebsites/gw-addon/js/wow.js";

var cssNode = document.createElement("link");
cssNode.href = "/wp-content/themes/gowebsites/gw-addon/css/animations.css";
cssNode.rel = "stylesheet";

head.appendChild(scriptNode);
head.appendChild(cssNode);

---

您应该使用

insertAdjacentHTML

head.insertAdjacentHTML("afterend",'<script language="javascript" src="/wp-content/themes/gowebsites/gw-addon/js/wow.js"></script>');
head.insertAdjacentHTML("afterend",'<link href="/wp-content/themes/gowebsites/gw-addon/css/animations.css" rel="stylesheet">');

head.insertAdjacentHTML（“尾端”）；
头.插入相邻TML（“尾端”），“；

appendChild（）

接受新节点或元素，而不是字符串。另外请注意，如果您在页面中包含了jQuery，您可以使用

$.getScript（）

简化此操作。我也尝试过使用just append，但没有成功。关于wp\u enqueue，我认为这是错误的。您将根据使该类在页面中可用的任何条件有条件地排队。不确定是否为类别、使用的页面模板、，与内容相关的ETC唯一的条件是使用了一个短代码，并且存在一个带有类的元素，我认为这在php中不是最好的做法或功能？如果我希望在页脚中加载脚本，如何将页脚区域追加到结束体标记的内部？调用

appendChild（）

在

主体

节点上，而不是@RoryMcCrossan所说的

头部

，您只需指定元素。我已使用当前代码更新了答案，它不会创建或链接元素。我已经使用alert（）检查了wowJS的值，它返回“1”createElement确实修复了它，没有收到您的评论通知，我只是自己偶然发现了答案lol