Javascript : appendChild

[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??