28

Is it possible to insert/generate <Script> and <Link> tag inside the <Header> using only Javascript or DOM (not JQuery) when the page load or by just including one <Script> tag inside the <Header> and do it from there? And would still allow us to debug it and avoid duplicates if just in case we already added one similar <Script> or <Link> in the <Header>?

For example:

Before

<Header>
   <script src="Scripts/Generate.js" type="text/javascript"></script>
</Header>

After

<Header>
   <script src="Scripts/Generate.js" type="text/javascript"></script>
   <script src="Scripts/Script1.js" type="text/javascript"></script>
   <script src="Scripts/Script2.js" type="text/javascript"></script>
   <link href="CSS/Css1.css" rel="stylesheet" type="text/css" />
   <link href="CSS/Css2.css" rel="stylesheet" type="text/css" />
</Header>

Any advice or answers would help me.

1
  • For those reading <head> is quite different from <Header> Aug 16, 2022 at 19:18

3 Answers 3

50

HTML:

<head>
    <script src="Scripts/Generate.js"></script>
</head>

Scripts/Generate.js:

if(!document.getElementById('id1')) {
    var script = document.createElement('script');
    script.id = 'id1';
    script.src = 'Scripts/Script1.js';
    document.head.appendChild(script);
}
if(!document.getElementById('id2')) {
    var link = document.createElement('link');
    link.id = 'id2';
    link.rel = 'stylesheet';
    link.href = 'CSS/Css1.cs';
    document.head.appendChild(link);
}

Afterwards, the HTML is:

 <head>
    <script src="Scripts/Generate.js"></script>
    <script id="id1" src="Scripts/Script1.js"></script>
    <link id="id2" rel="stylesheet" href="CSS/Css1.cs">
</head>
3
  • This is applicable for <Link> right? And is it possible to put it on an external js file and do the rest there?
    – Chris N.P.
    Oct 30, 2013 at 3:46
  • (1) Yes. (2) Depends what you mean by 'it'. Oct 30, 2013 at 3:49
  • For those reading; technically this does not answer the question as asked - likely due to the OP mis-typing the <head> tag as <Header> Aug 16, 2022 at 19:21
10

The easiest way is like this:

> document.head.innerHTML += '<link rel="stylesheet" type="text/css" href="styles.css" />';
1
  • What a nice and simple solution!
    – Reiner
    Dec 16, 2021 at 12:25
2

I'll presume that "duplicate" means having the same src attribute value. Note that this will only prevent the addition of a duplicate by the script, so it must be run after all other scripts have been added:

function conditionallyAddBySource(tagName, src) {

  tagName = tagName.toLowerCase();
  var elements = document.getElementsByTagName(tagName);
  var propToCheck = {script:'src', link: 'href'}[tagName];

  for (var i=0, iLen=elements.length; i<iLen; i++) {

    // If find a "matching" element, do nothing
    if (elements[i][propToCheck].indexOf(src) != -1) {
      return;
    }
  }

  // Otherwise, add an element of the required type
  var element = document.createElement(tagName);
  element[propToCheck] = src;
  document.getElementsByTagName('head')[0].appendChild(element);
}

conditionallyAddBySource('script', 'myJSLib.js');

The new element doesn't have to be added to the head, could just be written immediately using document.write or attached to the body (or any other element that can have child nodes other than the HTML and document element). Link elements probably should be in the head though.

Edit

Determine whether to check src or href depending on whether tagName is script or link.

Using Paul's suggestion of querySelector, you can use:

function conditionallyAddBySource(tagName, src) {

  tagName = tagName.toLowerCase();
  var propToCheck = {script:'src', link: 'href'}[tagName];
  var element = document.querySelector(tagName + '[' + propToCheck + '$="' + src + '"]');

  if (!element) {
    element = document.createElement(tagName);
    element[propToCheck] = src;
    document.getElementsByTagName('head')[0].appendChild(element);
  }
}

provided querySelector support is avilable (IE 8 in standards mode and higher, dunno about others).

2
  • If available, document.querySelector would be even better. Oct 30, 2013 at 4:02
  • Less code, faster, more readable. Mostly the first and last reasons. document.querySelector('script[src="Scripts/Script1.js"]') Oct 30, 2013 at 4:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.