Javascript Navigation Output (Minified)
<p>I have a page where I output the following</p>

<p>This is the html in my template</p>

<pre><code>&lt;ul id="process"&gt;&lt;span&gt;Process: &lt;/span&gt;
</code></pre>

<p>This is my minified Javascript (functions.js)</p>

<pre><code>$(window).load(function () {
    var a = $("#slider").children("img");
    currentIndex = 0;
    slideCount = a.length;
    fadeDuration = 1E3;
    navigation = $("#process");
    navCnt = 0;
    navNumFix = 1;
    for (i = 0; i &lt; slideCount; i++) navigation.append('&lt;li&gt;&lt;a href="#" class="navItem" data="' + navCnt+++'"&gt;' + navNumFix+++"&lt;/a&gt;&lt;/li&gt;&amp;#32;");
    $(".navItem").click(function () {
        var b = $(this).attr("data"),
            c = currentIndex;
        currentIndex = b;
        c != currentIndex &amp;&amp; ($(a[c]).fadeOut(fadeDuration), $(a[currentIndex]).fadeIn(fadeDuration))
    })
});
</code></pre>

<p>For my slider this all outputs the ul tag and attaches the list item via Javascript as follows:</p>

<pre><code>&lt;ul id="process"&gt;&lt;span&gt;Process: &lt;/span&gt;
&lt;li&gt;&lt;a href="#" class="navItem" data="0"&gt;1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" class="navItem" data="1"&gt;2&lt;/a&gt;&lt;/li&gt; 
&lt;/ul&gt;
</code></pre>

<p>Instead of outputting the ul tag in my template, how can I output the ul tag only when the script calls for it? Kind of like the list item above.</p>
