Loading javascript dynamically
<p>I have 2 links in my HTML form. When user clicks on the link, I want the related javascript page to load without reloading the whole page</p>

<p>I have used the following code in my HTML page:</p>

<pre><code>&lt;body id="b"&gt;
&lt;h1&gt;Page that switch between CSS and JS&lt;/h1&gt;
&lt;div class="container" id="content"&gt;
  &lt;div class="link" id="li"&gt;
    &lt;ul class="menu" id="nav"&gt;    
      &lt;li&gt;&lt;a id="three" href="#" onclick="switchjs1();"&gt;JavaScript 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a id="four" href="#" onclick="switchjs2();"&gt;JavaScript 2&lt;/a&gt;&lt;/li&gt;      
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="content" id="con"&gt;
    &lt;form action="" method="post" class="f1" id="f1"&gt;
        &lt;table class="t"&gt;
            &lt;tr&gt;
            &lt;td&gt;&lt;label&gt;Label 1&lt;/label&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type="button" id="1" value="Show 1" class="btn1"/&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
            &lt;td&gt;&lt;label&gt;Label 2&lt;/label&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type="button" id="2" value="Show 2" class="btn2"/&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
            &lt;td&gt;&lt;label&gt;Label 3&lt;/label&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type="button" id="3" value="Show 3" class="btn3"/&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
            &lt;td&gt;&lt;label&gt;Label 4&lt;/label&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type="button" id="4" value="Show 4" class="btn4"/&gt;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>And following code for scripting:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    var headID = document.getElementsByTagName("head")[0];         
    var jsNode = document.createElement('script');
    jsNode.type = 'text/javascript';
    jsNode.id = 's1';

    headID.appendChild(jsNode);

    function switchjs1()
    {
        var js = document.getElementById("s1");
        js.removeAttribute('src');
        js.setAttribute("src", "js1.js");
    }

    function switchjs2()
    {
        var js = document.getElementById("s1");
        js.removeAttribute('src');
        js.setAttribute("src", "js2.js");
    }
&lt;/script&gt;
</code></pre>

<p>By the above code I have created a <code>&lt;script&gt;</code> tag and I want to set the value of the <code>src</code> attribute depending on the link clicked by the user. But it only loads the JavaScript file which is related to the link that was clicked by the user in first place.  For example, if the user clicks on the link 'javascript 1', it loads the <code>js1.js</code> file but it does not load the <code>js2.js</code> file when the user clicks on 'javascript 2' link.</p>

<p>Please help me because it has become a big problem.
Thank you.</p>
