Загружать CSS-файл, только если на странице присутствует элемент с классом

Question

Я пытаюсь оптимизировать загрузку файлов 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-файлов в заголовок, однако ни одна из них не позволяет сделать его условным.

РЕДАКТИРОВАТЬ: с тех пор я только что использовал функцию jQuery getScripts (), но мне все еще нужно знать, как добавить 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);
    }
});

Answer 1

Сначала создайте узлы, затем добавьте их, затем используйте метод 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);

Answer 2

Вы должны использовать 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">');