 <p>May Issue: You need to call jquery functionality after <code>ready event fired</code> from JQuery. size and maxlength it works as we expected.maxlength how many char user can type and Size determine visible width, in characters.</p> <pre><code> &lt;h2&gt;Aufgaben:&lt;/h2&gt; &lt;div data-role="fieldcontain"&gt; &lt;ul id="exercise-list" data-role="listview" data-inset="true"&gt; &lt;li id="addExercise"&gt;Aufgabenname: &lt;input type="text" name="aufgabenname" id="aufgabenname" size="20" maxlength="20"&gt;&lt;/input&gt; Maximalpunktzahl: &lt;input type="text" name="maxPunkte" id="maxPunkte" size="2" maxlength="2"&gt;&lt;/input&gt;&lt;div style="float:right;"&gt;&lt;button id="add" data-icon="plus" data-iconpos="notext"&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;script&gt; $(document).ready(function() { $("#add").on("click", function() { var aufgabenname = $("#aufgabenname").val(); var maxPunkte = $("#maxPunkte").val(); $("#addExercise").prepend("&lt;li&gt;Aufgabe: "+aufgabenname+", Maximalpunktzahl: "+maxPunkte+" &lt;div style=\"float:right;\"&gt;&lt;button class=\"delete\" data-icon=\"delete\" data-iconpos=\"notext\"&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;"); }); }); &lt;/script&gt; </code></pre> <p><a href="http://jsfiddle.net/ehyZL/" rel="nofollow">Fiddle Demo</a></p>