Adding element to node

Question

There's a HTML:

<div class="test">
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
</div>

And a bit of JS:

$(document).ready(function() {
    // do stuff when DOM is ready
    $(".test ul").append('<li>Dupa</li>');
});

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

.append('Dupa')

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

Anu suggestions?

edit: 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.

Thanks :)

Answer 1

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);

?

Answer 2

I checked your code and it works perfectly on my machine... So I think it's not jQuery bug.

Answer 3

Extending Frans-Willems code:

jQuery(function($){
   /* This is exactly the same as that document ready thing */
   var li=document.createElement("li");
   $(li).text("Dupa");
   $(".text ul").append(li);
});