> ...I am wondering if the usual style is to wrap every text
> node with an element, as in the following?

That's certainly one way you could do it.  Another option would be to
remove those images from within the list items; instead, make them the
background graphic on the li.  E.g., this:

<li><img class='toggle' src="doc.gif" alt="">Tags, Tags, Tags</li>


<li>Tags, Tags, Tags</li>

...with these rules in the style sheet:

ul.treeroot > ul > li {
    background-image:  url(doc.gif);
    background-repeat: no-repeat;
    padding-left: 20px;

...assuming the image is 20px wide.  You would obviously want to play
with background-position and padding to make the look the way you

That lets you use Element#update on the li element directly without
having to worry about the image, as well as saving you a fair bit of
repeated markup.  Another nice thing about using background images for
this sort of thing is that you can toggle the image easily by changing
the class of the li -- for instance, to show plus.gif or minus.gif
depending on whether things are expanded.  Downside (you knew there'd
be one) is that the background image can't take focus for the purposes
of keyboard navigation.  There are ways to handle that, though.  In a
lightweight tree I did recently, I was able to make the first line of
the node a link that also did the expand/contract, for instance, which
provided a nice big mouse target and also a keyboard mechanism.
Obviously your click-and-edit means you wouldn't do quite the same
thing in this case, but FWIW...

(An OT point: I'm not at all sure UL is allowed as a direct child of
UL; certainly not in XHTML transitional.  Might be worth rejigging a
bit.  http://validator.w3.org/ is useful.)

T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available

On Mar 14, 1:22 am, Doug Reeder <reeder...@gmail.com> wrote:
> I'm writing a tree editor; initial HTML looks like this:
> <ul class='treeroot'>
>         <li><img class='toggle' src="open.gif" border="0" id="folder1"
>                 alt="">HTML
>         <ul id="branch1">
>                 <li><img class='toggle' src="doc.gif" alt="">Tags, Tags, 
> Tags</li>
>                 <li><img class='toggle' src="doc.gif" alt="">Hyperlinks</li>
>                 <li><img class='toggle' src="doc.gif" alt="">Images</li>
>                 <li><img class='toggle' src="doc.gif" alt="">Tables</li>
>                 <li><img class='toggle' src="doc.gif" alt="">Forms</li>
>         </ul>
>         </li>
>         <li><img class='toggle' src="open.gif" border="0" id="folder2"
>                 alt="">CSS
>         <ul  id="branch2">
>                 <li><img class='toggle' src="doc.gif" alt="">Inline 
> Styles</li>
>                 <li><img class='toggle' src="doc.gif" alt="">Document Wide 
> Styles</li>
>                 <li><img class='toggle' src="doc.gif" alt="">External Style 
> Sheets</
> li>
>                 <li><img class='toggle' src="doc.gif" alt="">Formatting 
> Text</li>
>                 <li><img class='toggle' src="doc.gif" alt="">Positioning</li>
>         </ul>
>         </li>
> </ul>
> ... so the text of a list item is a sibling node to the image and the  
> subordinate list.
> When the text of a list item is clicked on, the text node needs to be  
> replaced with a text input element, for which I have written the  
> following code (element is the element which receives the user's  
> click, which will usually be a list item element):
> function startEditText(element) {
>         var text, ind, input;
>         text = $A(element.childNodes).find( function (node) {
>                 return node.nodeType === Node.TEXT_NODE;
>         } );
>         input = document.createElement("input");
>         input.setAttribute("type", "text");
>         if (text) {
>                 if (text.nodeValue) {
>                         input.setAttribute("value", text.nodeValue.strip());
>                 }
>                 element.replaceChild(input, text);
>         } else {
>                 element.appendChild(input);    
>         }
>         input.focus();
> }
> This code works, but seems unduly complicated for what it does.  Since  
> the Prototype DOM methods enumerate only over Elements, and not over  
> text nodes, I am wondering if the usual style is to wrap every text  
> node with an element, as in the following?
> <ul class='treeroot'>
>         <li><img class='toggle' src="open.gif" border="0" id="folder1"
>                 alt=""><span>HTML</span>
>         <ul id="branch1">
>                 <li><img class='toggle' src="doc.gif" alt=""><span>Tags, 
> Tags, Tags</
> span></li>
>                 <li><img class='toggle' src="doc.gif" 
> alt=""><span>Hyperlinks</
> span></li>
>                 <li><img class='toggle' src="doc.gif" 
> alt=""><span>Images</span></li>
>                 <li><img class='toggle' src="doc.gif" 
> alt=""><span>Tables</span></li>
>                 <li><img class='toggle' src="doc.gif" 
> alt=""><span>Forms</span></li>
>         </ul>
>         </li>
>         <li><img class='toggle' src="open.gif" border="0" id="folder2"
>                 alt=""><span>CSS</span>
>         <ul  id="branch2">
>                 <li><img class='toggle' src="doc.gif" alt=""><span>Inline 
> Styles</
> span></li>
>                 <li><img class='toggle' src="doc.gif" alt=""><span>Document 
> Wide  
> Styles</span><img src="doc.gif" alt=""></li>
>                 <li><img class='toggle' src="doc.gif" alt=""><span>External 
> Style  
> Sheets</span></li>
>                 <li><img class='toggle' src="doc.gif" alt=""><span>Formatting 
> Text</
> span></li>
>                 <li><img class='toggle' src="doc.gif" 
> alt=""><span>Positioning</
> span></li>
>         </ul>
>         </li>
> </ul>
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
For more options, visit this group at 

Reply via email to