Question

My code as follows

function liReplace(str) {
    document.getElementById('srch').innerHTML = str;
}

<ul class="dropdown">
    <li id='srch'>
        <a href="#">All Categories</a>
        <ul class="sub_menu">
            <li>
                <a href="#">Gadgets</a>
                <ul>
                    <li onclick='liReplace("DVD")'><a href="#" >DVD</a></li>
                    <li><a href="#">XBOX</a></li>
                    <li><a href="#">Ps2</a></li>
                    <li><a href="#">Cellphone</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Locations</a>
                <ul>
                    <li><a href="#">Indoor</a></li>
                    <li><a href="#">Outdoor</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

I wanted to change the All Categories to what ever is clicked

see <li onclick='liReplace("DVD")'><a href="#" >DVD</a></li>

I used javascript function to change innerhtml but the whole child li’s are gone after.

Help on how to get the part of first Li text only.

Answer 1

This should do it – you can just replace the text within the <a> element at the top <li>:

function liReplace(str) {
    $('#srch > a').text(str);
}

Where the > ensures that only the immediate child gets changed.