Update <li> href address via javascript

[reldridge]

This works but I know there has to be a better, or correct way to write this without having to create id’s for the elements.

I am basically looking how to select the ul li elements and change the < a href> address.

<div id="footernav">
    <ul>    
        <li><a href="/MyShirtBuzz">Home</a> </li>        
        <li><a href="/MyShirtBuzz/Stores/Contact">Contact Us</a> </li>        
        <li><a href="/MyShirtBuzz/FAQHelp/Home">FAQ &amp; Help</a></li>
<li><a href="/MyShirtBuzz/Stores/Page/1000008/Sizing_Chart"><span style="list-style:none" class="linkbutton">Sizing Chart</span></a></li>
    
    </ul>
</div>

<script type="text/javascript">
  document.getElementById("footernav").firstElementChild.setAttribute("id", "newid");   

  document.getElementById("newid").firstElementChild.setAttribute("id", "footer-home-link");  

  document.getElementById("footer-home-link").firstElementChild.href="http://www.myshirtbuzz.com";
</script>

[m3g4p0p]

You might get all anchor elements inside #footernav like

var footer = document.getElementById('footernav')
var links = footer.querySelectorAll('a')

or just

var links = document.querySelectorAll('#footernav a')

Then you can access individual links just like array elements:

links[0].href = 'http://www.myshirtbuzz.com'

[liontas76]

@reldridge

document.getElementById(“footernav”).firstElementChild.setAttribute(“id”, “newid”);

document.getElementById(“newid”).firstElementChild.setAttribute(“id”, “footer-home-link”);

document.getElementById(“footer-home-link”).firstElementChild.href=“http://www.myshirtbuzz.com”;

How to you want to change the herf? Via event?

[reldridge]

Thanks, Works perfectly. Much cleaner.