javascript - 在不破坏子级的情况下更改父级 的文本

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);
}

哪里>确保只有直系子级被更改。