Menu
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.
665
JavaScript in <head> or <body> Scripts can be placed in the <body> , or in the <head> section of an HTML page, or in both.
We can link JavaScript to HTML by adding all the JavaScript code inside the HTML file. We achieve this using the script tag which was explained earlier. We can put the <script></script> tag either inside the head of the HTML or at the end of the body.
Source order independence: You can place the scripts inside head or body without worrying about blocking (useful if you are using a CMS). Execution order still matters though.
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>
The easiest way is like this:
> document.head.innerHTML += '<link rel="stylesheet" type="text/css" href="styles.css" />';
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.
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).
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
