Inserting script and link tag inside the header tag

javascript link
html link> tag
javascript dom insert link
how to include external javascript in html
javascript create new link element
javascript add link to node
javascript generate html link
create a href tag in javascript

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.

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>

Can I use <link> tags in the body of an HTML document , , but only those with an itemprop attribute (for Microdata) resp. A JavaScript function is a block of JavaScript code, that can be executed when "called" for. For example, a function can be called when an event occurs, like when the user clicks a button. You will learn much more about functions and events in later chapters.

The most easiest way is like this:

> document.head.innerHTML += '<link rel="stylesheet" type="text/css" href="styles.css" />';

Making headings into link targets, How do you add a link to a header in HTML? How add codes inside the head or body tag in WordPress Monthly Dollars. How to Add Header and Footer Code in WordPress How to Add Code to Head Tag in Wordpress ? Step by Step - Duration:

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

How To Add JavaScript to HTML, , depending on when you want the JavaScript to load. This does work - to load the script, but how can I get access to the code in the script. For example, I'd like to call a function that lives inside the script, but I'm not able to invoke it inside the component where the script is loaded. – zero_cool Oct 11 '16 at 19:45

Linking Style Sheets to HTML, This is working : var fontLoader = function (param) { var headID = document.​getElementsByTagName('head')[0]; var link = document.createElement('link');  Sticking it inside the asp:content where the content lives inside the body tag. Sticking it inside the asp:content where the content lives inside the head (You've said this isn't an option, so ignore this). Adding it programmatically using the ScriptManager inside a control you use on the page as above.

Using Javascript to create a <link> element and then adding it to , Eric Range wrote in with this blog post idea. Is it better to wrap a header tag in an anchor link, or the other way around? Assuming HTML5, both  The HTML <script> Tag. The <script> tag is used to define a client-side script (JavaScript). The <script> element either contains script statements, or it points to an external script file through the src attribute. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

Link in Header? Or Header in Link?, A relative URL - points to a file within a web site (like src="/scripts/example.js"). ❮ HTML <script> tag · COLOR PICKER · colorpicker  Click the SEO tab. Scroll down to More SEO Settings. Paste the header codes in the text To add header codes: Access your Site Manager from inside the Editor. Click the SEO tab. Scroll down to

Comments
  • This is applicable for <Link> right? And is it possible to put it on an external js file and do the rest there?
  • (1) Yes. (2) Depends what you mean by 'it'.
  • If available, document.querySelector would be even better.
  • Less code, faster, more readable. Mostly the first and last reasons. document.querySelector('script[src="Scripts/Script1.js"]')
  • Ah, that makes sense.