在不破坏子项的情况下更改父<li>的文本

Question

我的代码如下

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>

我想将所有类别更改为所点击的内容

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

我使用javascript函数来改变innerhtml但是整个孩子的李已经消失了.

有关如何获取第一个Li文本部分的帮助.

Answer 1

这应该这样做 - 您可以只替换<a>顶部元素中的文本<li>:

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

其中>,只有眼前的孩子得到改变保证.