Adding an element to a node
There is HTML:
<div class="test">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
And some JS:
$(document).ready(function() {
// do stuff when DOM is ready
$(".test ul").append('<li>Foo</li>');
});
Why doesn't it add anything, but if I remove the html from the append argument string,
.append('Foo')
it works - but that's not the point - the new text is added as an anonymous block, not an li element as I wanted.
Anu suggestions?
edit: Arg, I found the problem. I changed the file saved from Firefox "Save Page", the extension was .xhtml - and here's the problem. I renamed it and it works great.
Thank:)
0
Marcin
source
to share
3 answers
I checked your code and it works fine on my machine ... So I think it is not a jQuery bug.
0
Falco foxburr
source
to share
Adding actual HTML from JavaScript is pretty ugly, have you tried something like this:
var li=document.createElement("li");
li.appendChild(document.createTextNode("Dupa"));
$(".text ul").appendChild(li);
?
+1
Frans-Willem
source
to share
Extending the Frans-Willem 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);
});
0
Kent fredric
source
to share