如何在特定脚本标记之后将脚本标记添加到头部
[英]How to add a script tag to the head section after a specific script tag
问题描述
I am using a single page application. 
我正在使用一个页面应用程序。 I am trying to add a <script></script> tag to the head from my nested div in the page after specific javascript code, but I got the error below. 我正在尝试在特定的JavaScript代码之后从页面的嵌套div的头部添加<script></script>标记，但是出现以下错误。 Please find my jsp code below. 请在下面找到我的jsp代码。
How to add a script tag after a specific script tag in the head tag from a nested div? 如何在嵌套div的head标签中的特定脚本标签之后添加脚本标签？
TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'
<html>
<head>
<!-- Google Tag Manager -->
<script>
(function(w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start' : new Date().getTime(),
event : 'gtm.js'
});
var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l='
+ l
: '';
j.async = true;
j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-5HWKRLC');
</script>
**<! Here i need to add another script when my inner div loading !>**
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
...
</head>
<body>
<% String gtm = (String) session.getAttribute("gtmObj"); %>
<div>
<script>
document.getElementsByTagName('head')[0].appendChild('<script>window.dataLayer = window.dataLayer || [];dataLayer.push(<%=gtm%>)<\/script>');
</script>
</div>
</body>
</html>
2 个解决方案
解决方案1
1 2019-05-06 06:31:54
appendChild accepts the parameter of type node or HTML element - https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild and you are passing the string . appendChild接受类型为node或HTML element的参数appendChild : //developer.mozilla.org/en-US/docs/Web/API/Node/appendChild ，您正在传递string 。 Instead create element using document.createElement . 而是使用document.createElement创建元素。
const script = document.createElement('script');
script.textContent = `window.dataLayer = window.dataLayer || []; dataLayer.push('<%=gtm%>')`;
document.getElementsByTagName('head')[0].appendChild(script);
To insert the script after specific script tag, you can add custom attribute and then select that element and use insertAdjacentElement to insert new created script after it. 要在特定script标记之后插入script ，可以添加自定义属性，然后选择该元素，然后使用insertAdjacentElement在insertAdjacentElement插入新创建的脚本。
// HTML
<script data-id = "myScript"></script>
// Javascript
const script = document.querySelector("script[data-id='myScript']");
const newScript = document.createElement('script');
newScript.textContent = "const a = 10";
script.insertAdjacentElement('afterend', newScript);
解决方案2
1 2019-05-06 06:35:22
use document.getElementById("some").insertAdjacentElement('afterend',script); 使用document.getElementById("some").insertAdjacentElement('afterend',script); and add it next to the script tag using insertAdjacentElement 并使用insertAdjacentElement将其添加到脚本标签insertAdjacentElement
var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute('textContent', '<script>window.dataLayer = window.dataLayer || [];dataLayer.push(<%=gtm%>);dataLayer.push({\\'event\\':\\'Txn\\',\\'Affiliation\\':\\'Vehicle\\'})<\\/script>'); document.getElementById("some").insertAdjacentElement('afterend',script);
<html> <head> <!-- Google Tag Manager --> <script id="some"> (function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start' : new Date().getTime(), event : 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-5HWKRLC'); </script> </head> <body> something </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.