11

How can I find out what the element is that a <script> sits in?
As an example, let's take this

<div>
 <script type="text/javascript">
  var time = new Date(), hrs = time.getHours(), min = time.getMinutes();
  document.write('It is '+hrs+":"+(min<10?'0':'')+min);
 </script>
</div>

Then if I want to change this to something more modern, how can I find out what element we're in?
So I want to write, for instance in jQuery

$(thisdiv).html('It is '+hrs+":"+(min<10?'0':'')+min);

but how do I get thisdiv?
Yes, I know, I can put an ID on it, but I have the feeling that wouldn't be necessary. The browser knows where we are, otherwise it couldn't even do the document.write!

So, suggestions? I searched, but couldn't find it. Is it so simple that I'm overlooking the obvious?

Mr Lister
  • 45,515
  • 15
  • 108
  • 150

4 Answers4

28

Script are executed in the order of appearance in the document. The contents of a script tag are evaluated on encounter, so, the last <script> element is always the current one.

Code:

<div>
  <script>
    var scriptTag = document.getElementsByTagName('script');
    scriptTag = scriptTag[scriptTag.length - 1];

    var parent = scriptTag.parentNode;
  </script>
</div>
Rob W
  • 341,306
  • 83
  • 791
  • 678
  • +1, I can't believe I overlooked that rather fundamental concept :( – danjah Feb 09 '12 at 11:35
  • Thank you! I wasn't aware either that the latest script was the last in the list, during its execution, so this the solution I was looking for. And as a plus, it works on all browsers I tested on, even Netscape 6. (Yeah, I'm thorough like that.) – Mr Lister Feb 09 '12 at 12:58
  • Wow, good one, hadn't thought about that. – Alex Turpin Apr 24 '12 at 14:52
  • Great to know. Useful in CMS where you don't want to add an `id` to a component to prevent from duplicates but still want to initialize it using a plugin. Like on a blog where multiple posts are shown. In jQuery one can use `$('script').last()`. – djmj Apr 12 '16 at 21:47
3

Firefox:

document.currentScript.parentElement

Chrome:

document.scripts.length
Phil H
  • 19,928
  • 7
  • 68
  • 105
  • Currently all browsers (except IE) support document.currentScript (see [Link](https://developer.mozilla.org/en-US/docs/Web/API/Document/currentScript#Browser_compatibility) ) – Dmitry Ovchinnikov Sep 02 '18 at 05:01
0
$('script#some_id').parent().html('blah blah');
osahyoun
  • 5,173
  • 2
  • 17
  • 15
  • 4
    *Yes, I know, I can put an ID on it, but I have the feeling that wouldn't be necessary.* – Didier Ghys Feb 09 '12 at 11:28
  • Mr Lister did mention not giving the script an id, previously on SO I was looking for a similar solution because I have many script els in a document which all required a knowledge of "where they are", the best I could come up with was setting a uniquely random var in the script block for identifying access within other scripts (http://stackoverflow.com/questions/3057628/how-to-self-identify-the-position-of-a-scripts-tag-in-the-dom). So maybe id's are the way to go... eagerly watching your Q. – danjah Feb 09 '12 at 11:31
0

Try this

<div id="mydiv">
 <script type="text/javascript">
  var time = new Date(), hrs = time.getHours(), min = time.getMinutes();
  document.getElementById('mydiv').innerHTML = 'It is '+hrs+":"+(min<10?'0':'')+min;
 </script>
</div>
Mujtaba Haider
  • 1,650
  • 2
  • 19
  • 29