Home/ Questions/Q 6729561
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T10:18:18+00:00

I just can’t fathom the logic, perhaps I’m over thinking it! I need to

  • 0

I just can’t fathom the logic, perhaps I’m over thinking it!

I need to make sure a script’s id attribute is unique before I append it into the DOM.

Here are some examples to show you what I need:

If in the <head> element I had 3 child script elements, like:

<script id="script-0"></script>
<script id="script-1"></script>
<script id="script-2"></script>

I’d want my new script element to have an id of "script-3"

If I had 3 child script elements, like:

<script id="script-0"></script>
<script id="script-2"></script>
<script id="script-3"></script>

I’d want my new script element to have an id of "script-1" or "script-4"

And in this case:

<script id="script-1"></script>
<script id="script-2"></script>

I’d want my new script element to have an id of "script-0" or "script-3"

Just so long as the id attributes of each script element are unique!

In this scenario, each script element is actually doing a JSONP request, and therefore, as it’s asynchronous, another script element may be added to the DOM in the interim and would need it’s own unique id.

After the JSONP request has received a response it is removed from the DOM, hence the gaps in the id‘s, like script-0, script-1, script-3, script-4 and script-6 for example, as the JSONP requests script-2 and script-5 may have received a response and been removed from the DOM. In this case, I’d like a new script element to have either the id script-2, script-5 or, worst case: script-7.

I hope this is clear enough!

I just can’t work out the logic, any help would be very much appreciated!

Oh, and only vanilla JS; no jQuery etc, thank you!

I promise to post an answer to a question on Stackoverflow for every answer posted in reply to this question! Promise!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Is it really necessary to fill the gaps?

    I would imagine keeping a running counter and just incrementing it would be easier to work with, especially considering you can have up to 9,007,199,254,740,992 unique JSONP requests:

    var requestJSONP = (function () {
    var guid = 0;

    return function (url) {
        var id = 'script-' + guid++;

        var script = document.createElement('script');
        script.id = id;
        script.src = url;
        script.type = 'text/javascript';

        script.onload = function () {
            this.parentNode.removeChild(this);
        };

        document.getElementsByTagName('head')[0].appendChild(script);

        return id;
    };
})();

    The closure is optional, but it will prevent any other script from altering guid.

    Example:

    var scriptId = requestJSONP('/request/resource?callback=handler');
    • 0