ajax; dropdown menu - not using jquery or mvc

initially displayed:

<ul id="DevMenu">
        <li id="cli">
            <input type='button' id='Button1' value='asdf' onclick="showhide(this.value)" />
        </li>
 </ul>

then I want to replace cli by input text,


function showhide(str) {
            //  alert(str);
            document.getElementById("cli").innerHTML = "<input type='text' id='Text1' onkeyup='showHint(this.value)' />";

        }

so the above works correctly and I see the text input displayed, now I want to display selected ul, and I do the following

document.getElementById("cli").innerHTML = "<input type='text' id='Text1' onkeyup='showHint(this.value)' />"
 + " <ul class='DevMenu first'> <li><a href='e' title='tr'>16 Mach</a></li> <li><a href='x' title='t2'>2 Lots </a></li> </ul>  "

but the above part does not work,

basically I expected to see a dropdown,  by the way if do the above in one string it works, so my string is correct.  What I am asking is how do we dynamically manupulate innerstring using the Ajax.  Behind the scene I am using ajax to replace the string.

please help how do we do three levels of string manupulations, 1- button, 2- text, 3- a dropdown.

Please do not refer me to an example, just guide me how to replace innerhtml???? thanks a lot.

I am basically trying to expand the following, example to a dropdown.
http://www.w3schools.com/ajax/ajax_aspphp.asp