CODEWITHSUNDEEP
jquery
Marcin
Marcin

Reputation: 13

Adding element to node

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>Foo</li>');
});

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

.append('Foo')

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

Upvotes: 0

Views: 168

Answers (3)

Kent Fredric
Kent Fredric

Reputation: 57354

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

Upvotes: 0

Frans-Willem
Frans-Willem

Reputation: 646

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

?

Upvotes: 1

Falco Foxburr
Falco Foxburr

Reputation: 746

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

Upvotes: 0

Related Questions