Изменить класс li через js, чтобы стать ссылками

Question

Как создать ссылки на основе приведенных ниже списков и изменить их из списков в ссылки по Javascript.

<li class="navigation">LOVE</li> 
<li class="navigation">HATE</li> 
<li class="navigation">LIFE</li> 

должны стать:

<li class="navigation><a href="#LOVE">LOVE</a></li> 
... 

Answer 1

$('li.navigation').each(function(index,element){ 
    var me = $(this); 
    $(element).replace(function(){ 
    return "<a href='your reference here'>"+me.text+"</a>" 
    }) 
}) 

Answer 2

Без JQuery:

function makeLinks(ul) { 
 
    for (i of document.querySelectorAll(ul + " > li")) { 
 
    var t = i.innerHTML; 
 
    i.innerHTML = "<a href='" + t.toLowerCase() + "'>" + t + "</a>"; 
 
    } 
 
} 
 

 
makeLinks("#menu");

<ul id="menu"> 
 
    <li class="navigation">LOVE</li> 
 
    <li class="navigation">HATE</li> 
 
    <li class="navigation">LIFE</li> 
 
</ul>

Answer 3

Как я не вижу JQuery тег, здесь решение с использованием простого javascript.

Чтобы перебрать все li с помощью querySelectorAll() и заменить каждую textContent с заданными узлами:

liAll = document.querySelectorAll('li'); 
 
liAll.forEach(function(elt) { 
 
    txt = elt.textContent; 
 
    link = document.createElement('a'); 
 
    atxt = document.createTextNode(txt); 
 
    link.appendChild(atxt); 
 
    link.setAttribute('href', '#' + txt); 
 
    elt.appendChild(link); 
 
    elt.firstChild.remove(); 
 
});

<li class="navigation">LOVE</li> 
 
<li class="navigation">HATE</li> 
 
<li class="navigation">LIFE</li>