发表新帖
发表新帖

What's the difference between putting script in head and body?

后端 未结
关注
9 968
花落未央
花落未央 2020-12-04 12:15

I was getting a problem .
相关标签:
9条回答
  • 萌比男神i
    2020-12-04 12:42

    It's simple, JavaScript will go from up-down, unless you tell it to do something else. By the time it reaches the li elements, the JavaScript code has already been completed.

    If you want to keep it in the head however, you could use the document.ready function and it will load only after the HTML it's loaded.

    0 讨论(0)
  • 再見小時候
    2020-12-04 12:47

    Head will get rendered before Body. If you're trying to access your li tags in the head, the obvious answer is that they are not created until the browser renders the body section and therefore cannot be referenced.

    0 讨论(0)
  • 礼貌的吻别
    2020-12-04 12:47

    Because at the time of you calling it in the head, the li doesn't yet exist (As far as the DOM is concerned) – F4r-20 1 min ago

    This is correct. But, try this:

    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <script type="text/javascript">
        window.onload = function(){ 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>

    0 讨论(0)
  • 庸人自扰
    2020-12-04 12:50

    When scripts are included in the head they load or run before the content of the page. When you include them in the body they load or run after the preceding html. It's usually good practice to put scripts as close to the end of the body as possible.

    0 讨论(0)
  • 心在旅途
    2020-12-04 12:51

    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.

    0 讨论(0)
  • 你的背包
    2020-12-04 12:56

    Following code executes the script in the head tag. Once without JQuery and then with JQuery that instructs the alert to display when the document is loaded $(document).reaady()

    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script src="jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
      // First alert will show # of opttions as 0, because the document is not ready yet
      alert(document.getElementsByTagName("li").length);
      // First alert will show the correct # of opttions as 2
      $(document).ready(function () {
        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>
    0 讨论(0)
 看不清?
提交回复
热议问题