head.appendChild giving error in console but working fine

Question

I am trying to inject a script on page load in head wherein I have to give the page name inside script. Below is how I am implementing it in my ts file.

**var head = document.getElementsByTagName('head')[0];
 var tag = document.createElement("script");
 tag.type = 'text/javascript';
 tag.innerHTML = "var DDO = {} DDO.pageData = {'pageName': " + pageUrl + "} ";
 head.appendChild(tag);**

The script is getting injected however an error is being thrown in the console tab.

ERROR: VM3741:1 Uncaught SyntaxError: Unexpected identifier at appendChild

Aman Kumayu · Accepted Answer · 2020-05-14T18:58:57.003

2

Try this

var head = document.getElementsByTagName('head')[0],pageUrl="somevalue";
var tag = document.createElement("script");
tag.type = 'text/javascript';
tag.textContent = "var DDO = {}; DDO.pageData = {'pageName': '" + pageUrl + "'} ";
head.appendChild(tag);

To remove previous script element

var script = head.childNodes[0]; //get previous script element
head.removeChild(script); //removing script

you have not provided single quotes for the value of the key pageName

edited May 14 '20 at 18:58

answered May 14 '20 at 14:31

Aman Kumayu

381
1
9

Thanks a lot **Aman** . Saved my night. Just another question. If I want to remove this tag before injecting another one, how can I do that. Like I said in my problem statement, I want to inject this tag on page change, and make sure that the previous tag is removed. Your reply will be much https://stackoverflow.com/users/8682062/aman-kumayuappreciated. – RISHABH AGGARWAL May 14 '20 at 18:00
I want to remove the tag by id. tag.id = "test"; Now I want to remove this particular tag with this id. Is it possible? – RISHABH AGGARWAL May 14 '20 at 19:19
I basically wants to do something like this. var head = document.getElementsByTagName('head')[0]; var tag = document.createElement("script"); tag.type = 'text/javascript'; tag.id = "test"; tag.textContent = "var DDO = {}; DDO.pageData = {'pageName': '" + pageUrl + "'} "; if (this._dataLayerInjected) { var script = head.childNodes[0]; //get previous script element head.removeChild(script); //removing script } else { head.appendChild(tag) this._dataLayerInjected = true; } Remove this particular tag with id : test – RISHABH AGGARWAL May 14 '20 at 19:21
you cannot add an id to a script element, it can only have src, charset, defer, type, async – Aman Kumayu May 14 '20 at 19:26
Actually, head.childNodes[0] is not working. When I debugged it came at head.childNodes[head.childNodes.length +1]. So basically I just want to replace this particular tag on every page load. And apart from that there are other scripts as well which should not get affected. Will be really thankful if you have a solution. – RISHABH AGGARWAL May 14 '20 at 19:29
replace this head.childNodes[head.childNodes.length +1] with this head.childNodes[head.childNodes.length -1] – Aman Kumayu May 14 '20 at 19:32
Yes I did that. However is there any better way of doing this? – RISHABH AGGARWAL May 14 '20 at 19:34
what you actually want to do ? – Aman Kumayu May 14 '20 at 19:43
I have a angular JS application, wherein on page load, I want to inject a script with above information, and then on page change, only previous script tag should be removed and a new script tag should be injected with the fresh value of pageurl. – RISHABH AGGARWAL May 14 '20 at 19:59
I think you can only achieve this with basic JS – Aman Kumayu May 14 '20 at 22:48

Rupinder Kaur · Answer 2 · 2020-05-14T14:26:01.547

1

tag.innerHTML = "var DDO = {}; DDO.pageData = {'pageName': " + pageUrl + "} "; semicolon missing after defining the variable DDO, and also from where are you injecting in pageUrl, make sure variable is defined.

try having script in external file and injecting in script tag with refrence to that file in case some error in script defined in inner html

document.head, document.body to attach scripts

edited May 14 '20 at 14:26

answered May 14 '20 at 14:20

Rupinder Kaur

82
1
13

1

External file script is not required here, can be done within script tag – Aman Kumayu May 14 '20 at 14:33

score 0 · Answer 3 · answered May 21 '20 at 11:34

Correct Answer:

var head = document.getElementsByTagName('head')[0];
    var tag = document.createElement('script');
    tag.type = 'text/javascript';
    tag.id = 'adobedatalayer';
    tag.textContent = 'var DDO = {}; DDO.pageData =' + JSON.stringify(pageinfo);
    var script = document.getElementById('adobedatalayer');
    if (script != null) {
      head.removeChild(script);
    }
    head.appendChild(tag);

head.appendChild giving error in console but working fine

3 Answers3