Menu
I was getting a problem .
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript"> alert(document.getElementsByTagName("li").length); </script> <title>purchase list</title> </head> <body> <h1>What to buy</h1> <ul id="purchases"> <li> beans</li> <li>Cheese</li> </ul> </body> When I put scripts in head, the result shows 0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Shopping list</title> </head> <body> <h1>What to buy</h1> <ul id="purchases"> <li>Cheese</li> <li>Milk</li> <script type="text/javascript"> alert(document.getElementsByTagName("li").length); </script> </ul> </body> When I tried to put scripts in body, the result shows 2. why there is such a difference? what is the main difference?
452
If your is not placed inside a function, or if your script writes page content, it should be placed in the body section. It is a good idea to place scripts at the bottom of the <body> element. This can improve page load, because script compilation can slow down the display.
A HTML file has headers and a "body" (payload) — just like a HTTP request. The <body> encapsulates the contents of the document, while the <head> part contains meta elements, i.e., information about the contents. This is (typically) title, encoding, author, styling etc.
If it's in the HEAD section, the script will be parsed before any HTML or CSS elements are loaded. If your Javascript references any of the web page's elements, there may be a slight delay in the fancy effects you want to apply, or it may just not work at all.
When you place a script in the head section, you will ensure that the script is loaded before anyone uses it. Scripts in the body section: Scripts to be executed when the page loads go in the body section. When you place a script in the body section it generates the content of the page.
What's the difference between putting script in head and body?
The time that it runs.
When I put scripts in head, the result shows 0 Shopping list
The elements you are trying to access don't exist when the script runs (since they appear after the script in the document).
Note that you can write a script so that a function is called later (for various values of later including "when the entire document has loaded") using event handlers.
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
