I need to insert new tags in html head. Not in document, in string that contains html. So regular expression is only way.
<head>
<title>Html</title>
</head>
And get something like this:
<head>
<title>Html</title>
<script src="some_path.js"></script>
</head>
And more:
<head>
<title>Html</title>
<script src="some_path.js"></script>
<script src="some_path_2.js"></script>
</head>
Use this:
function injectScript (id, src, async) {
var js,
fjs = document.getElementsByTagName("head")[0];
if (document.getElementById(id))
return;
js = document.createElement("script");
js.id = id;
js.src = src;
js.type = 'text/javascript';
if (async) {
js.async = true;
}
fjs.appendChild(js, fjs);
}
Will prevent double injection and support asynchronous scripts.
This is possible. Just get the <head> element and add children to it as usual:
document.getElementsByTagName("head")[0].appendChild(whatever);
For more information on how this works you can google for "Javascript DOM".
If you only have the HTML available as a string, and not as a DOM-document, you can do simple insertions prior to the head-close tag without resorting to regexes. The following code makes use of the splice method in this answer. It could be made a function instead of a prototype, and have the second parameter removed for our purposes:
String.prototype.splice = function( idx, rem, s ) {
return (this.slice(0,idx) + s + this.slice(idx + Math.abs(rem)));
};
var insertTag = function(newTag, html) {
var end = html.indexOf('</head>');
return html.splice(end, 0, newTag);
}
So if you had
var doc = '<head><title>Html</title></head>';
and you ran
var doc = insertTag('<script src="some_path.js"></script>', doc);
You would get
<head><title>Html</title><script src="some_path.js"></script></head>
The function is simple, and doesn't check for existence of the head-close tag, or any other safety concerns that might need to be taken. It would would with line-breaks, and is just given as a general idea of how to avoid DOM (per question) and regexes (per saving your sanity).
However, if you have a DOM available -- use it.
(function(){
var newscript = document.createElement('script');
newscript.type = 'text/javascript';
newscript.async = true;
newscript.src = 'some_path.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(newscript);
})();
If you want to get the name of the page into the title head, you can use window.onload before the title tag and it will search the selector to insert into .
In this example we are searching the page for an H3 tag. (Could be h2, h1...)
<!doctype html>
<html lang="en">
<head>
[other metas]
<script>window.onload = function(){
var h3Text = document.querySelector("h3").innerText;
return document.querySelector("title").innerHTML = h3Text;
}</script>
<title></title>
</head><body><h3>This Will Go Into the Title Tag</h3>....
<head>is a tag just like any other in page...no need for regex. You can append to it