Get surrounding element of javascript

Question

I have code that looks like this:

<div>
  <script type="text/javascript">
    (function() { 
      var s = document.createElement('script'); 
      s.type = 'text/javascript'; 
      s.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'localhost/chat/logo.js'); 
      var t = document.getElementById('craftysyntax'); 
      t.appendChild(s, t); 
    })(); 
  </script>
<div>

I want the file that was loaded by async' to be able to do something like this (note: this is not working js code, but it is what I want to do)

parent.appendChild(abc);

which will add the child element abc in the parent div .

So, is there any way the script can reference its parent container?

Edit:
Why do I want to do this?
My website (an online store) uses a chat program with a link in the navigation bar that changes based on whether there is an operator logged in to the chat program. I am trying to convert the program to use an asynchronous loader, but the external js can not use document.write if it has been loaded asynchronously. I am trying to convert all of the document.write calls in the script to use the dom instead.

Answer 1

When your code is immediately executed like that, the last script element will be the current one (because of synchronous downloading and executing).

So you can get a reference to all script elements, and then get the last one using the length property minus one.

Then you can access its parent node with parentNode property.

<script type="text/javascript">
    var allScripts = document.getElementsByTagName('script'),
        thisScriptParent = allScripts[scripts.length - 1].parentNode;
</script>

jsFiddle .

Also, there is no need to use a ternary to check for https . Just use protocol-less ( //localhost/chat/logo.js ) and it will resolve to the parent site's protocol.

Answer 2

I don't think you can reliably get the script tag that the code is running from.

I'm not sure why your logo.js script doesn't just directly get the element by its id ("craftysyntax"), but if you are looking for a more general solution (where you could, say, add multiple such elements/scripts to the document in rapid succession, without having them mess each other up), you could do something like this:

<div>
  <script type="text/javascript">
    (function() { 
      var s = document.createElement('script'); 
      s.type = 'text/javascript'; 
      s.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'localhost/chat/logo.js'); 
      var t = document.getElementById('craftysyntax'); 
      if (window.global_chatElems == null)
        global_chatElems = [];
      global_chatElems.push(t);
      t.appendChild(s); 
    })(); 
  </script>
<div>

then in your logo.js script:

if (window.globalChatElems) {
  for (var i=0; i<globalChatElems.length; i++)
    processChatElem(globalChatElems[i]);
  window.globalChatElems = null;
  }

Of course, if you are only allowing one of these elements per page, everything is much simpler....no need to make the global be an array, it can just be a single variable.

Answer 3

I ran into an old friend from school and we discussed this and figured out this solution.

I will have the inline script create its own div named based on the current time (or something like that).
Then I can pass the id of the div to the other script in the query string. (I already have the getQueryString function)

Inline

<script type="text/javascript"> 
  var randval = "helpbox" + Math.floor(Math.random()*10000);
  document.write('<div id="' + randval + '"></div>');
  (function() { 
     var csc = document.createElement('script'); 
     csc.type = 'text/javascript'; 
     csc.src = 'a1.js?divid=' + randval; 
     var s = document.getElementById('help'); 
     s.appendChild(csc, s); 
  })(); 

External

var my_div = document.getElementById(getQuerystring('divid'));