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 prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---