 <p>short answer: Yes you can use <a href="http://api.jquery.com/wrap/" rel="nofollow">wrap()</a> by default the <code>$('.gap')</code> selector it look for <code>.gap</code> class in your HTML, if it found it, it wrap it into <code>li</code> element.</p> <p>demo:</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.gap').wrap('&lt;li&gt;&lt;/li&gt;')</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt; &lt;span class="gap"&gt;...&lt;/span&gt;</code></pre> </div> </div> </p> <p><strong>Note</strong></p> <p>dont use <a href="http://api.jquery.com/append/" rel="nofollow">append()</a> result will be</p> <pre><code>&lt;span class="gap"&gt;...&lt;li&gt;&lt;/li&gt;&lt;/span&gt; </code></pre> <p><strong>Edit:</strong></p> <p>anyway <code>&lt;span class="gap"&gt;...&lt;li&gt;&lt;/li&gt;&lt;/span&gt;</code> or <code>&lt;li&gt;&lt;span class="gap"&gt;...&lt;/span&gt;&lt;/li&gt;</code> both of them are not a valid HTML <code>li</code> elements should be inside <code>ul</code> element please check these link, to undertand more about both of them append and wrap</p>