And some JS: $(doc...">
Clever Geek Handbook

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


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


source


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


source


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


source






More articles:


All Articles