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

问题:当您执行 elements[i].href = "#HTML"时，您试图将 href 直接设置为 li .navigation 。

建议的解决方案:获取每个 li .nvigation 元素的文本，然后使用 href 创建新的 anchor ，包含此文本，然后将其附加到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>