Is it bad to have script tag inside div?

Question

What is bad about having a <script> tag inside <div> inside <body>?

I'm dynamically updating a <div> to reload a JavaScript code inside a <div>. Are there any issues to worry about ?

Edit

As @Bergi insisted on seeing the code. Here it is(see below). This div (along with other div(s) containing presentation HTML elements) are updated via AJAX. This script inside div contains maps to do processing of newly loaded HTML elements on page with raw data.

        <div>
            <script type="text/javascript">
                var namesMap = <dynamic string from server here>;
                var addressesMap = <dynamic string from server here>;
            </script>
        </div>

Why would you want to do this? If you want this script to run right after the div is loaded, you can attach it to its load event. If you're dynamically updating the div (which suggests the DOM is already loaded), putting the script in the div has the same effect as putting it anywhere, in which case it is nice to append it to the body. — Asad Saeeduddin, Oct 25 '12 at 19:11
"*updating a div to reload a javascript code*" sounds like bad practise, yes. In general, ` — Bergi, Oct 25 '12 at 19:11
@Bergi: Within the reloaded JS code, I'm initializing some map & other objects with dynamic data from server to process some raw data on the page that was loaded in this AJAX request. — Rajat Gupta, Oct 25 '12 at 19:14
[Show](http://stackoverflow.com/posts/13075502/edit) us the code please, I can't really follow. However, it sounds like you should use Ajax instead of (dynamic?) script injection — Bergi, Oct 25 '12 at 19:23
Polluting the global scope like this is not good. Could you please show us the code that updates these divs via ajax, and the code that uses those variables? — Bergi, Oct 25 '12 at 20:41
Actually i do ajax operations via a java framework (jsf) which might not necessarily be relevant to you all, so I'm not sure if that code might be interesting for you guys. — Rajat Gupta, Oct 26 '12 at 05:40

Pranav 웃 · Answer 1 · 2013-01-09T03:53:33.357

52

It is perfectly ok to place the <script> tag anywhere in the body of the document.

From here,

The SCRIPT element places a script within a document. This element may appear any number of times in the HEAD or BODY of an HTML document.

However, whenever a <script> tag occurs, it pauses the parsing of the code till the script gets loaded, and executed.

edited Jan 09 '13 at 03:53

answered Oct 25 '12 at 19:10

Pranav 웃

8,469
6
38
48

4

Placing a – SeanMC Jun 05 '18 at 20:35

score 13 · Answer 2 · answered Oct 25 '12 at 19:10

13

You can add <script></script> inside a DIV tag. Just check on w3c, it is valid HTML.

answered Oct 25 '12 at 19:10

CoursesWeb

4,179
3
21
27

score 11 · Answer 3 · answered Oct 25 '12 at 19:11

11

There is not much bad about it. Most widgets work this way. It is still valid HTML.

If you want to embed an AdSense unit in your page, you will need to do it. The same with Amazon widgets. That means majority of websites have a script tag inside div.

answered Oct 25 '12 at 19:11

Michal Klouda

14,263
7
53
77

Panu Logic · Answer 4 · 2019-08-13T02:59:04.780

There are pros and cons for putting scripts inside html. The good thing is that a small script can be placed close to where it is used so you can more easily understand what the page is doing.

If nobody else but that one location needs that script then it is fine to put it there, I think.

Bad thing is that when you divide parts of your program into multiple locations it becomes more difficult to see and manage how such parts interact and interfere with each other. Whereas if you keep your html and javascript in separate files it becomes easier to understand each independently, and then finally focus on how they interact with each other. What are the "interfaces" between them.

If JavaScript is interspersed into the html then you can not organize your script-code separately from organizing the HTML.

ONE MORE THING to be aware of: If you have a DIV you may think that you can manipulate its content by re-assigning its innerHTML. And that works, except, you can not inject a script into the DIV that way. SEE:

Can scripts be inserted with innerHTML?

So one bad thing about having a script inside a DIV is that you can not replace such a script by re-assigning its innerHTML.

score 0 · Answer 5 · answered Jul 23 '17 at 08:38

0

By SCRIPT inside <DIV> still working. But some annoy with your layout - shacking when scroll. Best solution: put script inside <body> or <head> :D

answered Jul 23 '17 at 08:38

kollein

328
3
10

score -1 · Answer 6 · edited Apr 04 '18 at 07:18

-1

It was always a good practice to try to put your <script></script> tags in <head></head>. However, lately arguments appearead whether putting a tags at the end of <body></body> tags, just before made a page more faster.

I would recommend to put your <script></script> in <head></head> section of your HTML document, since it is more preffered. Additionally, putting a <script></script> inside a DIV is not a good practice.

You can post your example for a better answer abour organizing the structure of your document.

To sum up, there is no problem in what you are doing. But a more organized way is what I suggest.

edited Apr 04 '18 at 07:18

gog

1,220
11
30

answered Oct 25 '12 at 19:11

Davit

1,394
5
21
47

You will need to escape tags with `<` or surround them with backticks (`\``) as code snippets – Bergi Oct 25 '12 at 19:13
having script inside div with an ID would make us possible to change the script when we need it to be changed. For instance, Google Analytic and AdSense script changes over year. To change the all pages in a site would be trouble some if we put into head or end of body, especially if some pages has been change manually and some page need to be automatically change. Putting the script in a div would make it easier to simply find the ID of the DIV automatically and replace the script for the entire site. – Kardi Teknomo May 07 '19 at 13:40

Is it bad to have script tag inside div?

Edit

6 Answers6