Question

我正在尝试更改<li>标记内的文字。我查看了几个地方，而且所有地方都只有<li>标签和一些文字。 Mines里面有<a>个标签。我在W3Schools网站上做了一些修改：https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black_active

<!DOCTYPE html>
<html>
<head>
<style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }

    li {
        float: left;
    }

    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    li a:hover:not(.active) {
        background-color: #111;
    }

    .active {
        background-color: #4CAF50;
     }
    </style>
</head>
<body>

    <ul>
       <li id="home"><a class="active" href="#home">Home</a></li>
      <li id="news"><a href="#news">News</a></li>
      <li id="contact"><a href="#contact">Contact</a></li>
      <li id="about"><a href="#about">About</a></li>
    </ul>

</body>
</html>

我想更改文字＆＃34; Home＆＃34;喜欢＆＃34;你好＆＃34;用纯JavaScript（没有jQuery）。当我使用innerHTML时，<a>标记会中断。

提前谢谢！

Answer 1

您可以使用.children获取子元素，因此您可以执行以下操作：

document.getElementById("home").children[0].innerHTML = "Hello";

Answer 2

如果您想更改<a>标记的内部HTML而不是<li>标记，可以在<a>上设置ID，如下所示：<a id="home-link" class="active" href="#home">和然后在JavaScript中写document.getElementById('home-link').innerHTML = "Hello";

Answer 3

您不必使用<a>来破坏element.insertAdjacent HTML(position, text)标记。

因此，例如，element.insertAdjacentHTML('beforeend', 'Woot!')追加，element.insertAdjacentHTML('afterbegin', 'Woot!')预先添加“Woot！”选择的元素。

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

您甚至可以使用CSS伪元素完全避免使用JS。

示例：li > a::before { content: "Woot!"; }和li > a::after { content: "Woot!"; }基本上与上面的JS示例具有相同的效果，因为无论哪种方式（JS或CSS），都需要通过CSS定位它们。

在不更改html的情况下更改<li>文本

3 个答案: