Register Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
  #1  
Old 28 May 2009, 14:13
Bellardia Bellardia is offline
 
Join Date: Jul 2007
Javascript : appendChild

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]

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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.
Reply With Quote
  #2  
Old 29 May 2009, 20:49
UKBusinessLive UKBusinessLive is offline
 
Join Date: Sep 2008
Real name: Gerry
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.


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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



Does that help??

Last edited by UKBusinessLive; 29 May 2009 at 20:58.
Reply With Quote
  #3  
Old 31 May 2009, 01:25
Bellardia Bellardia is offline
 
Join Date: Jul 2007
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).
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 00:23.

Layout Options | Width: Wide Color: