Creating <li> with JavaScript in an XUL Application

Question

I try to create some li elements in my XUL Application. Theres only the text of the elements shown, but no list typical bullets and linebreaks.

Example:

• text
• text
text text text text text

Heres the JS Code I use to create the list:

var li = document.createElement('html:li');
var txt = document.createTextNode("only shown as simple text");
li.appendChild(txt);
document.getElementById('someList').appendChild(li);

HTML:

<html:ul id="someList">
    <html:li>this is shown in correct list style</html:li>
</html:ul>

I tried 'html:li' and also 'li' but nothing worked.

Any suggestions?

Answer 1

Ok, I figured it out by displaying the reference of the created elements with an alert box...

If you call createElement the XUL Namespace is used. html:foo has no effect. If you want to create an element in a different namespace then the one of XUL you have to use

 createElementNS(namespaceURI, qualifiedName)

So the following code works:

var htmlns = "http://www.w3.org/1999/xhtml";
var li = document.createElementNS(htmlns, "li");
var txt = document.createTextNode("text");
li.appendChild(tst);
document.getElementById('someList').appendChild(li);