How to set both a and href to an existing list?

Question

I already have a navigation bar and I would like the first item to become a link. I have only succeeded to append a link to the already existing item of the list. I feel like I should use the .setAttrribute method instead but I can't figure out how. Would someone help me so I can end up with a link instead of an list item AND a 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

Why you making it so complicated? this just using innerHTML

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