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>的{{1}}元素中的文字：

<li>

function liReplace(str) { $('#srch > a').text(str); }确保只有直接孩子被改变。

Answer 2

使用“＆gt;”强制执行孩子

function liReplace(txt) {
    $("#srch > a").html(txt);
}

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

2 个答案: