Is it possible to get HTML element from which function is called in JavaScript?
For example I have this in my HTML:
<script type="text/javascript">
function myFunction() {
var myContainer = getElementFromWhichFunctionIsCalled(); // Possible?
(myContainer.id == 'my-container'); // TRUE
}
</script>
<div id="my-container">
<script type="text/javascript">myFunction();</script>
</div>
Thank you.
The way you call it here, when myFunction is running, the document will only have been parsed up to the script element in #my-container. Because of that, you can use
var scripts = document.getElementsByTagName('script');
var currentScript = scripts[scripts.length - 1];
var myContainer = currentScript.parentNode;
to get the element.
I've finally came up with this solution:
Hope it helps someone.
/**
* Creating a temporary element to fetch it's parent element.
*/
function getElementFromWhichFunctionIsCalled() {
// Generating unique ID for temporary element.
var trickElementId = 'trick-element-' + Math.floor(Math.random() * 100000);
// Adding temporary element to the DOM.
document.write('<div id="' + trickElementId + '"></div>');
// Getting hold of added element.
var trickElement = document.getElementById(trickElementId);
// Getting parent element of our trick element.
var foundElement = trickElement.parentNode;
// Cleaning up (removing trick element from the DOM).
foundElement.removeChild(trickElement);
return foundElement;
}
myFunction(this), which would explicitly pass in the the DOM<script>objectthiswould be the global context (window), not the<script>DOM node.