Including variable assignments inside a function?
<pre><code>    &lt;button onclick="insert()"&gt;Click to insert&lt;/button&gt;
    &lt;hr id="start"&gt;
    &lt;hr id="end"&gt;
</code></pre>

<p>I wrote a javascript function that inserts a div between two horizontal rules:</p>

<pre><code>&lt;script type="text/javascript"&gt;    
    var element = document.createElement("div");
    var element_content = document.createTextNode("This is a newly added row!");
    element.appendChild(element_content);

    var sibling = document.getElementById("end")     
    var parent = document.getElementById("start").parentNode;

    function insert(){
        parent.insertBefore(element,sibling);         
    }
&lt;/script&gt;
</code></pre>

<p>However when I click the button for the second time, no divs are inserted.  I had to include all the variable assignments inside the function in order to click on the button for the 2nd time have the div inserted:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    function insert(){    
    var element = document.createElement("div");
    var element_content = document.createTextNode("This is a newly added row!");
    element.appendChild(element_content);

    var sibling = document.getElementById("end")     
    var parent = document.getElementById("start").parentNode;

        parent.insertBefore(element,sibling);         
    }
&lt;/script&gt;
</code></pre>

<p>Can someone explain why my first approach didn't allow a 2nd div to be inserted after clicking the button?</p>
