Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Your loop is fine (other than that you don't declare <code>i</code>, and so you fall prey to the <a href="http://blog.niftysnippets.org/2008/03/horror-of-implicit-globals.html" rel="nofollow">Horror of Implicit Globals</a>), it's <a href="https://developer.mozilla.org/en/document.write" rel="nofollow"><code>document.write</code></a> that's the problem. You can only use <code>document.write</code> in an inline script, not after the page has been loaded (e.g., not in the <code>body</code> <code>load</code> event). If you use <code>document.write</code> after the page is loaded, it tears down the page and <em>replaces</em> it with what you output (because there's an implicit <a href="https://developer.mozilla.org/en/DOM/document.open" rel="nofollow"><code>document.open</code></a> call). So in your case, your page disappears and 150 blank divs are there instead.</p> <p>To manipulate the page after load, you'll want to use the DOM, references:</p> <ul> <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/" rel="nofollow">DOM2 Core</a> - Widely supported by browsers</li> <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/" rel="nofollow">DOM HTML bindings</a> - Widely suppored by browsers</li> <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/" rel="nofollow">DOM3 Core</a> - Fairly well supported, some gaps</li> </ul> <p>For instance, here's how you'd write your <code>generate</code> function to append 150 blank divs to the page:</p> <pre><code>function generate() { var i; for (i = 0; i &lt; 150; i++){ document.body.appendChild(document.createElement('div')); } } </code></pre> <p>Or more usefully, 150 divs with their numbers in:</p> <pre><code>function generate() { var i, div; for (i = 0; i &lt; 150; i++){ div = document.createElement('div'); div.innerHTML = "I'm div #" + i; document.body.appendChild(div); } } </code></pre> <p><a href="http://jsbin.com/ahawum" rel="nofollow">Live copy</a></p> <hr> <p>Separately, if you're going to do any significant DOM manipulation, it's well worth using a good JavaScript browser library like <a href="http://jquery.com" rel="nofollow">jQuery</a>, <a href="http://prototypejs.org" rel="nofollow">Prototype</a>, <a href="http://developer.yahoo.com/yui/" rel="nofollow">YUI</a>, <a href="http://code.google.com/closure/library" rel="nofollow">Closure</a>, or <a href="http://en.wikipedia.org/wiki/List_of_JavaScript_libraries" rel="nofollow">any of several others</a>. These smooth over browser differences (and outright bugs), provide useful utility functions, and generally let you concentrate on what you're actually trying to do rather than fiddling about with inconsistencies between IE and Chrome, Opera and Safari...</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload