Dynamically generate a <li>?
<pre><code>&lt;span id="n-email" class="email-btn"&gt;&lt;a href="#."&gt;&lt;/a&gt;&lt;/span&gt;
</code></pre>

<p>On clicking this, a list item with a text field shows</p>

<pre><code>&lt;li id="new" class="select"&gt;
    &lt;a&gt;
        &lt;input type="text" id="emails" class="add-email" value="Untitled" onfocus="if(this.value=='Untitled'){this.value=''}" onblur="if(this.value=='')  {this.value='Untitled'}"/&gt;
    &lt;/a&gt;
&lt;/li&gt;
</code></pre>

<p>Suppose I filled something in this input field and press enter.<br>
On pressing enter I want to fire a event which would</p>

<ol>
<li>Remove the <code>&lt;li&gt;</code> containing the input field.</li>
<li><p>Insert new <code>&lt;li&gt;</code> in its place, like</p>

<pre><code>&lt;li&gt;
    &lt;a href="#."&gt;
        //here comes the value what we entered in the input field of above li//
    &lt;/a&gt;
&lt;/li&gt;
</code></pre></li>
</ol>
