jquery before() is out of order?
<p>I have a page where you can click a link that says "add a keyword" and an input will appear and you can enter the keyword, and then convert it into a span tag on blur or the "return" key. However, I've been adding onto it to allow for an "autocomplete" feature, so I'm trying to insert a </p>

<pre><code>&lt;ul&gt;&lt;/ul&gt; 
</code></pre>

<p>after my input in order to do a .load inside the list.</p>

<p>The relevant code I have is:</p>

<pre><code>var addKeywordId = 0;
$('a.add_keyword').live('click', function(){
    $(this).before('&lt;input type="text" class="add_keyword" id="addKeyword'+addKeywordId+'" /&gt;&lt;ul&gt;&lt;li&gt;hi&lt;/li&gt;&lt;/ul&gt;');
    $('.add_keyword').focus();
    addKeywordId++;
});
</code></pre>

<p>The problem is, that my HTML structure ends up looking like this:</p>

<pre><code>&lt;ul&gt;&lt;li&gt;hi&lt;/li&gt;&lt;/ul&gt;
&lt;a class="add_keyword"&gt;+ add keyword&lt;/a&gt;
&lt;input id="addKeyword0" class="add_keyword" type="text /&gt;
</code></pre>

<p>INSTEAD OF</p>

<pre><code>&lt;input id="addKeyword0" class="add_keyword" type="text /&gt;
&lt;ul&gt;&lt;li&gt;hi&lt;/li&gt;&lt;/ul&gt;
&lt;a class="add_keyword"&gt;+ add keyword&lt;/a&gt;
</code></pre>

<p>Anybody know why my HTML is added out of the order I specified??</p>

<p>Thanks</p>

<p>EDIT: This seems to be working fine in Google Chrome, but not in Mozilla Firefox.. :(</p>
