Take the 2-minute tour ×

I've got what we'll just call a "widget"...and I want to insert that widget (ultimately just an iframe) at the current location of the script tag.

So you might have:

<p>Some example text</p>
<script src="http://example.com/widget.js" class="widget" async></script>
<p>More text</p>

In that widget.js file, there is this:

var createIframe = function() {
  var parent = document.getElementsByClassName('widget');
  var iframe = document.createElement('iframe');

  iframe.src = '//example.com'

  // Works, but just inserts it at the end

  // Does not work...just doesn't seem to do anything

window.onload = function() {

And as noted in the code comment, doing document.body.appendChild(iframe) works fine, but just inserts the iframe at the very end of the document.

But what I really want to do is just insert the iframe right where the script tag is. That document.body.appendChild(iframe) is my attempt at it, but it literally just doesn't seem to do anything (no iframe and no errors).

So, how can I insert the iframe in the same spot as the script tag?

share|improve this question

2 Answers 2

up vote 3 down vote accepted

You need to get the current <script> tag, which in this case is the last one:

var thisScript = document.scripts[document.scripts.length - 1];

and insert the <iframe> after it:

var parent = thisScript.parentElement;
parent.insertBefore(iframe, thisScript.nextSibling);


Or simply replace the current script with the <iframe>:

var parent = thisScript.parentElement;
parent.replaceChild(iframe, thisScript);


Alternately – if you can believe it – document.write() is actually a suitable solution here, so long as you do it while the document is loading and not in a window.onload callback:

function createIframe() {
    document.write('<iframe src="//example.com"></iframe>');



share|improve this answer
nextSibling is only supported since IE9 developer.mozilla.org/en-US/docs/Web/API/TreeWalker.nextSibling –  Bogdan Gusiev Dec 20 '13 at 9:36
Thanks for the heads-up, but I'm entirely disinterested in supporting legacy IE in pretty much any of the code that I write. jQuery 2 was released in April 2013 and does not support IE <9. It's time to move on. –  Matt Ball Dec 20 '13 at 17:11

Add an ID to your <script> element and query this element from the DOM, e.g. <script id="myscript" src="http://example.com/widget.js" class="widget" async></script>.

In widget.js:

var scriptElement = document.getElementById("myscript");
var parentElement = scriptElement.parentElement;
parentElement.replaceChild(iframe, scriptElement);
share|improve this answer

Your Answer


