Question 36551 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Adding script/css to DOM using Javascript – Jquery

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.

Tags:

2

Answers


  1. 0

    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"/>`;
}
    Login or Signup to reply.
  2. 0 
    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)
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search