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"時，您.navigation直接將href設置為li .navigation 。

建議的解決方案：獲取每個li .nvigation元素的文本，然后使用href創建新的錨點並包含該文本，然后使用.innerHTML將其附加到li ：

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並將其附加到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>