Javascript : appendChild

[Bellardia]

What's the best way to add an <li> with a nested <a> tag to an exisiting <ul>?

More simply, I want to create a structure like this :
<li><a href='something'>Click</a></li> from the ground up, and insert it into the ul DOM

When I use my method, it works in opera, but not in safari or firefox, however it does not produce any javascript errors, it just doesn't work!

Sample code [I've tried several ways...here's one]

var newli = document.createElement('li');
var aHref = document.createElement('a');
aHref.href = 'www.google.com';
var text = document.createTextNode('hello' );
newli.appendChild(aHref);
var child = parent_node.firstChild;
parent_node.insertBefore(newli, child);
parent_node.firstChild.firstChild.appendChild(text );


Is there a specific order that I have to create and insert the nodes?
This 'works' as in it inserts a node, but it isn't linked as it should be.
I've also tried aHref.setAttribute('href', '#6') ... but doesn't seem to work either.

[UKBusinessLive]

Remember, that to correctly nest lists, child OLs or ULs should be children of an LI element,
not direct descendents of their parent OL/UL. The text used to expand the branch should be written between the <li> tag and the <UL/OL/A> tag, and should only contain HTML that is permitted inside an 'A' element.

Note; Opera 7 will lose any style attributes you define in this text - use classes instead.

<ul id="someID">
<li>Book 1
<ul>
<li><a href="someHref">Chapter 1</a></li>
<li><a href="someHref">Chapter 2</a></li>
</ul>
</li>
<li><a href="elsewhere.html">Book 2</a>
<ul>
<li><a href="someHref">Chapter 1</a></li>
<li><a href="someHref">Chapter 2</a></li>
</ul>
</li>
<li>Book 3
<ul>
<li><a href="someHref">Chapter 1</a></li>
<li>Cha<span class="doMore">pt</span>er 2
<ul>
<li><a href="someHref">Sub 1</a></li>
<li><a href="someHref">Sub 2</a></li>
</ul>
</li>
</ul>
</li>
</ul>

Adding a new element to a document is very logical. The first step is to create the node (element) you wish to append, the next is to find where you wish to append it within the document, and the final step is to actually do the appending.

A node is the representation of either a piece of text or a tag and its attributes in the DOM. The syntax for creating a node is very simple - you just call a method of the document object. To create a text node, we use the createTextNode() method of the document object.

document.createTextNode(Text) returns a node with the given text in it. Here is an example use of it:

var txtNode = document.createTextNode("Hello. This is a new node.");

To create a new tag we use the createElement() method of document. To give the new tag attributes, we use its setAttribute() method. For example, to create a node containing an "A" tag and then append the HREF attribute to it, we use the following:

var link = document.createElement('a');
link.setAttribute('href', 'mypage.htm');

The above example would create a link pointing to "mypage.htm" (<A HREF="mypage.htm">). Please note that you can name the node anything you want -- we just use link because it makes it easier to identify what the node holds later on. You can also set any attributes on it you wish, not just one. For instance, to add a NAME attribute to the above tag, we would simply add:

link.setAttribute('name', 'myanchor');

to the node, after it was created but before it was appended.



Does that help?? ;)

[Bellardia]

I figured it out, sort of. Thanks a lot for the detailed response.

Since the page is xhtml+voice, which was encoded as xml at the time there was some weird behavior. Mainly document.style attributes don't work from inside the xml and causes a javascript error (only in FF), also if you setAttribute('class', something) and then append it into a parent node, the class is removed -- the class has to be set by selecting the child after the append.

There could be many other things I've done wrong...it's very hard to validate a x+v page since there aren't any validators for this content yet (and surely won't come close to validating as xml, xhtml, or html).