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

Question

我已经有一个导航栏，我希望第一个成为链接。我仅成功地将链接添加到列表的现有项目。我觉得我应该改用.setAttrribute方法，但是我不知道怎么做。有人会帮助我，以便最终得到一个链接，而不是列表项和链接吗？

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