Javascript how to change href

Question

function PressMe(){   
    var elements = document.getElementsByClassName("navigation");
    for (var i = 0; i < elements.length; i++){
         elements[i].href = "#HTML";    
    }   
} 

Trying to create a function with plain JavaScript that should do the following but I am missing something and I am not sure what.

<li class="navigation">HTML</li> 

Should be changed into

<li class="navigation><a href="#HTML">HTML</a></li> 

For three list elements.

Have managed to do with jQuery but need it in JavaScript.

{
    $(".navigation").wrapInner("<a href='#HTML'></a>");
});

Answer 1

Problem : You're trying to set the href to the li .navigation directly when you do elements[i].href = "#HTML" .

Suggested solution: Get the text of every li .nvigation element then create the new anchor with href contain this text then append it to the li using .innerHTML :

for (var i = 0; i < elements.length; i++){
    var text = elements[i].innerText;
    elements[i].innerHTML = "<a href='#"+text+"'>"+text+"</a>";    
} 

Hope this helps.

 function PressMe() { var elements = document.getElementsByClassName("navigation"); for (var i = 0; i < elements.length; i++) { var text = elements[i].innerText; elements[i].innerHTML = "<a href='#"+text+"'>"+text+"</a>"; } } 

 <ul> <li class="navigation">HTML</li> <li class="navigation">TEST</li> <li class="navigation">TEXT</li> </ul> <button type='button' onclick='PressMe()'>Press Me </button> 

Answer 2

 function PressMe() { var elements = document.getElementsByClassName("navigation"); for (var i = 0; i < elements.length; i++) { var link = document.createElement("a"); link.href = "#" + elements[i].innerText; link.innerText = elements[i].innerText; elements[i].innerText = ""; elements[i].appendChild(link); } } PressMe(); 

 <ul> <li class="navigation">HTML</li> <li class="navigation">CSS</li> <li class="navigation">JAVASCRIPT</li> </ul> 

Answer 3

So select the text of the element, and add the anchor

 var elements = document.getElementsByClassName("navigation"); for (var i = 0; i < elements.length; i++) { var html = elements[i].innerHTML elements[i].innerHTML = '<a href="#' + html + '">' + html + '</a>'; } 

 <ul> <li class="navigation">HTML</li> <li class="navigation">FOO</li> <li class="navigation">BAR</li> <li class="navigation">WORLD</li> </ul> 

or you can use createElement and append it to the li.

 var elements = document.getElementsByClassName("navigation"); for (var i = 0; i < elements.length; i++) { var li = elements[i]; var html = li.innerHTML; li.innerHTML = ""; var anchor = document.createElement("a"); anchor.innerHTML = html; anchor.href = "#" + html; li.appendChild(anchor); } 

 <ul> <li class="navigation">HTML</li> <li class="navigation">FOO</li> <li class="navigation">BAR</li> <li class="navigation">WORLD</li> </ul>