{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Evening l夕情丶 的问题《Appending scripts to head using javascript - weird》','https://www.manongdao.com/q-1103576.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
The problem I'm trying to solve is an ad loading script, that loads the ad code with jsonp and inserts it into the dom.
Now sometimes the ad code will include javascript tags, and i figured it was just a matter of moving them to the head section and they would run. In theory that works fine but when i made a script to move script tags to the head i ran into some weird behavior.
So I wrote this code to test just the script moving part, eliminating the rest of the code as an error source.
I get the same results, if I have just two scripts in the div it moves one of them, if I have 3 scripts it moves 2 of them. In the code pasted below it moves script 1 and 3, skipping the remote javascript reference and the last script-tag.
Would be interesting to at least know why this happens, and if it can be solved.
Edit: To clarify one thing, if i put the remote jquery script first and one of the simple script tags second it will move the remote script tag to the head fine and skip the second script tag.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// get div id
function test() {
var td = document.getElementById('testId');
var scripts = td.getElementsByTagName("script");
console.log("No. of scripts to transfer to head: "+scripts.length);
for(i=0;i<scripts.length;i++) {
var curScript = scripts[i];
document.head.appendChild(curScript);
}
}
</script>
</head>
<body onload="test();">
<div id="testId">
<script type="text/javascript">var firstScript = 1;</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">var secondScript = 1;</script>
<script type="text/javascript">var thirdScript = 1;</script>
</div>
</body>
</html>
You're laboring under a false assumption: It doesn't matter whatsoever whether
scriptelements are in theheadorbody, they get run regardless. Moving them after they've been appended to the DOM is at best pointless, and at worst may cause unfortunate side-effects if the script is re-run when moved (but I don't think it is).As for why you're seeing the behavior you're seeing, it's because
getElementsByTagNamereturns a liveNodeList. When you move a script, it gets removed from theNodeList. So given your four scripts, you'll get back aNodeListinitially containing four elements, so.lengthis4and[0]is your first script. When you move that script out of thediv, theNodeListis updated because the script is no longer in thediv, so its length is now3and[0]refers to your second script (the one loading jQuery).You can avoid having this behavior interrupt your loop in two ways:
Loop backward, from
.length - 1to0inclusive, orTurn the
NodeListinto an array, so the elements aren't moved out from under you.