Adding script/css to DOM using Javascript-CodePudding

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.

CodePudding user response：

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)
}

CodePudding user response：

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"/>`;
}