CODEWITHSUNDEEP
javascript
Gascogne
Gascogne

Reputation: 43

Javascript how to change href

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>");
});

Upvotes: 2

Views: 1353

Answers (3)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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>

Upvotes: 2

epascarello
epascarello

Reputation: 207511

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>

Upvotes: 0

Zoltan Toth
Zoltan Toth

Reputation: 47667

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>

Upvotes: 1

Related Questions