<p>There's a HTML:</p>

<pre><code>&lt;div class="test"&gt;
&lt;ul&gt;
    &lt;li&gt;Item 1&lt;/li&gt;
    &lt;li&gt;Item 2&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>And a bit of JS:</p>

<pre><code>$(document).ready(function() {
    // do stuff when DOM is ready
    $(".test ul").append('&lt;li&gt;Foo&lt;/li&gt;');
});
</code></pre>

<p>Why does it add nothing, but if I remove html from append's argument string,</p>

<pre><code>.append('Foo')
</code></pre>

<p>it works - but that's not the point - new text is added as anonymous block, not li item as I wanted.</p>

<p>Anu suggestions?</p>

<p><em>edit:</em>
Argh, I've found the problem. I modified a file saved from Firefox's "Save page" option, the extension was .xhtml - and here's the problem. I renamed it and it works fine.</p>

<p>Thanks :)</p>

adding actual HTML from JavaScript is rather ugly, have you tried something like this:
```
```
var li=document.createElement("li");
li.appendChild(document.createTextNode("Dupa"));
$(".text ul").appendChild(li);
```
```
?