What is the point of using an ID attribute in a script tag?

html id attribute rules
id tag
div id tag in html
button id
p tag with id
id in html
id on script tag
element id

Basically what I am asking is what is the point of giving my script tags an id attribute? Can the routines inside of them be called or referenced differently because of this identification? Could this cause any problems making the script/page act funny?

Thanks.

The id is just another accessor of the <script> tag inside the DOM tree. You could in theory use document.getElementById() to retrieve the <script> node and delete it or add other attributes (though I don't believe you can modify the src attribute once it has loaded in the DOM). The id isn't required for those operations though -- it could have been accessed by any DOM function such as getElementsByTagName("script") as well.

If you do need to access the <script> tag with DOM manipulations, the id makes it just a little easier. Otherwise, there is little benefit1.


1That is sort of true of adding an id attribute to any DOM node, though nodes affecting presentation can also benefit from CSS targeting the id, unlike a <script> tag...

HTML Global id Attribute, Use the id attribute to manipulate text with JavaScript: The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to​  The HTML id attribute is used to specify a unique id for an HTML element (the value must be unique within the HTML document). Using The id Attribute The id attribute is used by CSS or JavaScript to perform certain tasks for the element with the specific id value.

As the earlier answers have mentioned, once the code in the script tag runs, it's results will not be undo-ed by replacing/deleting the script node.

But the id can be useful if the code has not run till now. Following is such a script tag:

<script id="code1" type="text/myjs">.....</script>

Since the browser is not aware of this type of script, it will ignore it's execution but the tag and it's code will still be available in the DOM.

Working example: http://jsfiddle.net/sv_in/rt9Q2/

This is largely used for client side templates. A template, example for Mustache.js, is stored in such a script tag. When it is needed to be compiled, it is obtained from tag using it's id. Advantage with this approach is that the view (templates) and the model (js variable which contain data to be shown in the view) is completely separate.

Other than this practise, there is no general purpose use for an id for a script tag

HTML id Attribute, The id attribute is most used to point to a style in a style sheet, and by JavaScript (​via the HTML DOM) to manipulate the element with the specific id. The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.

There is no meaning giving id to your script tags, the scripts on a page just execute in a sequence they are on the page.

What is purpose of id attribute in html? - HTML & CSS, The id attribute specifies a unique id for an HTML element. and by JavaScript (​via the HTML DOM) to manipulate the element with the specific id. so that it is used for one tag and we can specify the style for that tag in HTML document. The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.

Adding an id attribute to your script elements serves 2 specific purposes: 1. you can recognise your scripts when reading the web page's source code; 2. the HTML reference says you should be able to overwrite the contents of an identifiable element (but experience teaches us that few browsers actually do that).

For instance, if you already have a script with id="myParticularScript", then adding a new script element with that same id should replace the old one, loading any new (or the same) source you specified in the src attribute.

While my experience with dynamic loading of javascripts proves that the new script does get loaded into the browser, no browser I tested managed to replace the older element that holds the same id.

So that just leaves the first purpose: easy recognition. In my work, we use systems to generate web pages, and we didn't always know which script (or css link, for that matter) is added by which component. We solved this by adding ids to both the script tags and the css link tags - ids that we were able to recognise and trace back to our systems.

id (HTML attribute), The id attribute provides a unique identifier for an element within the document. or by JavaScript code (via the Document Object Model, or DOM) to make The id attribute value must begin with a letter in the roman alphabet  In this element's markup, the tag name is img, and the markup for id, src, alt, class, and title represents the element's attributes, each of which consists of a name and a value. jQuery gives us the means to easily manipulate an element's attributes and gives us access to the element so that we can also change its properties.

This might be useful for checking the existence of the resource file in the src url attribute in the server. For cache busting, reverencing the file name of .js and .css files are required. This will help in checking out if the file names has changed in the server and then do a reload via code via

$window.location.reload() 

Code example (angularjs):

service.reloadApplication = function () {
    var script = document.getElementsById("scriptAppMin");                  
    if (!!script.getAttribute('src') &&       doesFileExist(script.getAttribute('src')) == false)
                            $window.location.reload();                                                             
    }


 function doesFileExist(fileUrl) {
    var xhr = new XMLHttpRequest();
    xhr.open('HEAD', fileUrl, false);
    xhr.send();
    return !(xhr.status == "404");
}

HTML, It is used by CSS and JavaScript to perform a certain task for a unique element. In CSS, the id attribute is used using # symbol followed by id. Syntax: <tag id=""></  The id attribute provides a unique identifier for an element within the document. It may be used by an a element to create a hyperlink to this particular element.

Script tag, It also loads a script file with src attribute. The JavaScript code can also be embedded in <script> tag as shown below. Example: <script> tag. The Id Attribute The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page. There are two primary reasons that you might want to use an id attribute on an element − If an element carries an id attribute as a unique identifier, it is possible to identify just that element and its content.

Scripts in HTML documents, HTML's support for scripts is independent of the scripting language. If the src attribute is not set, user agents must interpret the contents of the element This may be done either through a default declaration or a local declaration. when identifying an element: a name attribute takes precedence over an id if both are set. Omitting the attribute, or setting it to a JavaScript MIME type, means that the script is a classic script, to be interpreted according to the JavaScript Script top-level production. Classic scripts are affected by the charset, async, and defer attributes.

Searching: getElement*, querySelector, If an element has the id attribute, we can get the element using the method div > < script > // elem is a reference to DOM-element with id="elem" elem getElementsByTagName(tag) looks for elements with the given tag and  Definition and Usage. The <script> tag is used to define a client-side script (JavaScript). The <script> element either contains scripting statements, or it points to an external script file through the src attribute. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

Comments
  • There isn't really any point to adding an id to a script tag. Is there a specific instance that you are asking about?
  • So what's the problem here? Sometimes it is useful to add an id to a script tag when you want to parse it.
  • Not necessarily a problem i had just recently come across some code in which all the script tags had id attribute I was curious as to why if they serve no purpose?
  • possible duplicate of Why would I put an ID on a script tag?
  • Possible duplicate of Why would I put an ID on a script tag?
  • I want to manipulate my script id, is it possible? I mean i have <script id=123> into my index page which is manipulate different pages. If I add this script it appears in all pages. But i don't want in all pages only on specific one.
  • Never underestimate the use of a seemingly useless feature. It could become a life-saver one day. PS: Tawk.to support has washed their hands about fixing this, saying they can't control how the user's website chooses to print, but you and I know that's a load of bullshit. It's very easy for them to add a media query to hide the widget for print media.