Adding script/css to DOM using Javascript

Marcio Lino 0
Viewed 25

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.

jquery javascript css html
2 Answers

Whatever selector that works in jQuery will work with document.querySelector method.

Something like this:

if (!document.querySelector(`link[href='${css}']`)) {
  document.head.innerHTML += `<link rel="stylesheet" href="${css}" type="text/css"/>`;
}
technophyle0 
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)
}
Xion 140
Related