Menu Problems Again - Failure To Copy [grand]children?

[chibineku]

I am having a strange new problem. I use a javascript function to change the id of a top level menu (list) item to 'cur', depending on the page name matching a top-level menu item or a PHP set variable - that's neither here nor there. In order to change the id, I have to create a new node with the appropriate id, because changing ids dynamically doesn't work, and duplicate the children (i.e. the lower level menu (ul) items). However, this approach doesn't seem to properly copy the lower level menu items. Here is the original code for one of the list items:

		 <li id="products" class="sub ">			 Products			 <ul>				 <li class="">					 <a href="/products/psoriasis">Psoriasis</a>				 </li>				 <li class="">					 <a href="/products/excema">Excema</a>				 </li>				 <li class="">					 <a href="/products/anti-bacterial">Anti-Bacterial</a>				 </li>				 <li class="">					  <a href="/products/bespoke">Bespoke Products</a>				 </li>			 </ul>		 </li>

When the current page matches a top level list item, or the php variable is set, this function does the new node creation and old node duplication:

var CurRaw;var Cur;Cur = "<?php $curPage = substr($_SERVER["PHP_SELF"],1);$curPage = explode(".",$curPage);echo($tree?$tree:$curPage[0]); ?>";if(document.getElementById(Cur)) {var oldNode = document.getElementById(Cur);var newNode = document.createElement("li");newNode.id = "cur";newNode.className = "sub unclick";var innards = oldNode.children;while(innards.length > 0) {newNode.appendChild(innards[0]);}var innardsContent = oldNode.innerHTML;newNode.innerHTML = innardsContent;oldNode.parentNode.replaceChild(newNode, oldNode);}

The source code, when there is a match, on safari shows the menu as it should look, but on FF only shows:

 <li id="cur" class="sub unclick">			 Products			 		 </li>

So, it seems that the sub menu is not being duplicated, and even on safari where it seems like the sub menu is there, the top level menu item does not display it when clicked. To see it in action: http://sinaesthesia.co.uk/products/psoriasisI wonder about forgetting the complex JS function and instead simply appending a classname that will attract the same styling as the id 'cur', but I seem to recall trying that in the past and it not working right...probably because the JS that works the menu does a lot of changing of classes...

[justsomeguy]

Look into using cloneNode instead:http://www.java2s.com/Code/JavaScriptRefer...s/cloneNode.htm

[chibineku]

That looks ideal - I'll play around with that. Thanks!

[chibineku]

Easiest. Fix. Ever. Thank you so much - that more than halved the length of that function and made it work better.