Javascript, как изменить href

Question

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

Попытка создать функцию с простым JavaScript, который должен сделать следующее, но я что-то упустил, и я не уверен, что.

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

Должен быть изменен в

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

Для трех элементов списка.

Умеют работать с jQuery, но это необходимо в JavaScript.

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

Answer 1

Проблема: Вы пытаетесь установить HREF на литий .navigation непосредственно, когда вы делаете elements[i].href = "#HTML".

Предлагаемого решения: Получить текст каждого элемента Li .nvigation затем создать новый якорь с href содержит этот текст добавить его в li с помощью .innerHTML:

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

Надеется, что это помогает.

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

Так выделите текст элемента, а также добавить якорь

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>

или вы можете использовать createElement и добавить его в литий.

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>