Find the tag JavaScript is running in

Question

Generating HTML source on backend, I am using separate independent widgets.

I am simply including pieces of markup like this to the resulting HTML output.

 <div> I want to work with this DOM element <script> new Obj(/*but I can't get this <div> as a parameter! */); </script> </div>

I'm looking for a way to find the DOM element in which the obj is created (Without any unique IDs). This would add flexibility to my app and speed up the development. But is that technicaly possible in JavaScript?

If you are generating it on the backend, assign a unique id to the <div>, and pass the same id into whatever code is in the <script> tag when it is generated. — Michael Berkowski
– Michael Berkowski, Commented Dec 13, 2012 at 19:15
Instead of placing the script in a div, why not just have the script generate the div and then you have access to it immediately? — j08691
– j08691, Commented Dec 13, 2012 at 19:17
under window dom everything follows the xml node structure, so you can alternately lookup parent node and its attributes. in this case the enclosing div. — SriN
– SriN, Commented Dec 13, 2012 at 19:46
Guys, the solution with unique ID is quite nice, I was just asking of the way to keep the code as simple as possible — Dan
– Dan, Commented Dec 13, 2012 at 19:47
@user711819: honestly, I hear about parentXML method in JavaScript for the first time. Could you please show me some code? How can I access the parent DOM element from the running script? — Dan
– Dan, Commented Dec 13, 2012 at 19:51

Travis J · Accepted Answer · 2012-12-13 19:17:41Z

You could seed an element in there and then get it's parent, and then remove the element.

<div> I want to work with this DOM element <script> document.write("<div id='UniqueGUID_3477zZ7786_' style='display:none;'></div>"); var thatDivYouWanted; (function(){ var target = document.getElementById("UniqueGUID_3477zZ7786_"); thatDivYouWanted = target.parentNode; target.parentNode.removeChild(target); })(); new Obj(/*but I can't get this <div> as a parameter! */); </script> </div>

Salman Arshad · Accepted Answer · 2018-02-04 19:57:51Z

The following code works:

<script> function Obj(color) { var scriptTags = document.getElementsByTagName("script"); var scriptTag = scriptTags[scriptTags.length - 1]; // find parent or do whatsoever var divTag = scriptTag.parentNode; divTag.style.backgroundColor = color; } </script> <div> I want to work with this DOM element <script>new Obj("green");</script> </div> <div> I want to work with this DOM element <script>new Obj("yellow");</script> </div> <div> I want to work with this DOM element <script>new Obj("lime");</script> </div>

This method has very simple code and has almost zero impact on performance.

Note: I am pretty sure this won't work IE6 (as far as I remember it does not support manipulating open tags).

Matt Lo · Accepted Answer · 2012-12-13 19:23:36Z

I believe your approach is not ideal. If you're trying to obtain the <div>, it should be done programmatically in a conventional way using JavaScript and the API's that empower you to query the target <div>

Instead of executing inline, you can execute in a separate scope in a controlled way (DOM Ready then Query then Your Method). You can target your div by using an ID, CSS class name, or any other CSS selector in JavaScript.

This allows you to pretty much do the follow anywhere you want, not inline.

// on dom ready... var div = document.getElementById('myDiv'), // replace with any other selector method myObject = new Object(div);

Need to find your div? https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll

Yep, my approach is not perfect, but it allows to divide the code in standalone chunks that are quite independent do not know anything about each other
You can divide the code in such chunks using functions. Keep in mind that inline javascript code is executed along with the interpretation of the HTML, so the next div will not be shown to the user until the code in the previous div has been executed completely.

WebStakker · Accepted Answer · 2012-12-13 19:20:24Z

If you know beforehand how the page will be structured, you could use for example:

document.getElementsByTagName("div")[4]

to access the 5th div.

Collectives™ on Stack Overflow

Find the tag JavaScript is running in

4 Answers 4

Comments

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Linked

Related