only add script to head if doesn't exist

Question

I want to add additional scripts and styles to my site when a specific div is loaded. I start out by defining a path to either a script or stylesheet and then create an element. Hereafter I append the element to the head tag in HTML.

But I would like a way to see if the script or stylesheet already has been append before I append it again. It would be stupid to append an already existing script or stylesheet.

Q: How do I use javascript to check wether or not a script already exists in the head tag, and then append the element if not?

EDIT

I have made a function based on the answer from @KernelPanik. It doesn't work yet but hopefully it will. The function is currently in question: my script appending function doesn't work

Answer 1

If you can use jquery, this code is good

function appendScript(filepath) {
    if ($('head script[src="' + filepath + '"]').length > 0)
        return;

    var ele = document.createElement('script');
    ele.setAttribute("type", "text/javascript");
    ele.setAttribute("src", filepath);
    $('head').append(ele);
}

function appendStyle(filepath) {
    if ($('head link[href="' + filepath + '"]').length > 0)
        return;

    var ele = document.createElement('link');
    ele.setAttribute("type", "text/css");
    ele.setAttribute("rel", "Stylesheet");
    ele.setAttribute("href", filepath);
    $('head').append(ele);
}

In your code write

appendScript('/Scripts/myScript.js');
appendStyle('/Content/myStyle.css');

Answer 2

var lib = '/public/js/lib.js';

if (!isLoadedScript(lib)) {
  loadScript(lib);
}

// Detect if library loaded
function isLoadedScript(lib) {
  return document.querySelectorAll('[src="' + lib + '"]').length > 0
}

// Load library
function loadScript(lib) {
  var script = document.createElement('script');
  script.setAttribute('src', lib);
  document.getElementsByTagName('head')[0].appendChild(script);
  return script;
}