如何将 a 和 href 都设置为现有列表？

Question

我已经有一个导航栏，我希望第一个项目成为 link。我只成功地将 link 附加到列表中已经存在的项目。我觉得我应该改用 .setAttrribute 方法，但我不知道该怎么做。有人可以帮助我，这样我就可以得到一个 link 而不是一个列表项和一个 link 吗？

       <nav>
            <ul>
                <li class="navigation">HTML</li>
                <li class="navigation">DOM</li>
                <li class="navigation">Javascript</li>
            </ul>
       </nav>

function newLink () {

    var navigation = document.getElementsByClassName("navigation");
    var existingText = navigation[0].innerHTML;

    var a = document.createElement("a");
    a.setAttribute("href", existingText);
    a.innerHTML = existingText;

    document.getElementsByClassName("navigation")[0].appendChild(a);
}

    newLink();

Answer 1

你为什么搞得这么复杂？这只是使用 innerHTML

function newLink () {
    var navigation = document.getElementsByClassName("navigation");
    var existingText = navigation[0].innerHTML;
    document.getElementsByClassName("navigation")[0].innerHTML=  '<a href="'+existingText+'">'+existingText+'</a>';
}