Adding script/css to DOM using Javascript

September 21, 2022

Tibco is removing JQuery from Spotfire and I have some Dashboards relying on Jquery to work, as shown bellow:

var css = "https://localhost/css/style.css";

if (!$('link[href="' + css +'"]').length) {
    $("<link/>", { "rel": "stylesheet", "type": "text/css", "href": css }).appendTo("head");
}

I would like to do the same using Javascript, but I was unable to find a solution that allow me to load the CSS only if does not exist in DOM.

>Solution :

const cssHref = "https://localhost/css/style.css";

// If element not found returns `null`
const stylesheet = document.querySelector(`link[href="${cssHref}"]`)
if (!stylesheet) {
  // You can create your own helper function to simplify the creation of the element
  // instead of manually creating the <link> element
  const style = document.createElement('link')
  style.rel = 'stylesheet'
  style.href = cssHref

  document.head.append(style)
}