We learned how to change the HTML inside elements. What if we wanted to the change the HTML attributes? This is very easy to do.
First, update the <body> tags inside your HTML document to this.
<a href="http://google.com" id="foo">Google</a>
What we’re going to do is grab the anchor tag’s link and change it with another link.
Now that our HTML document is set up, clear up your script and add this bit of code.
var a = document.getElementById( 'foo' );
a.href = 'http://jaskokoyn.com';
As usual, we’re grabbing any tag with the element ID foo and storing it in a variable. As I stated before, you don’t have to store it in a variable. The reason we do this is to make our code cleaner and to make it easier to explain.
If you refresh your page, then you should see the link change from Google to my site.
That’s it! While this works, let’s do one more thing before moving on. I want to change the text inside the anchor tag to Jasko Koyn. Add this line of code into your script.
a.innerHTML = 'Jasko Koyn';
Nothing new here. Just using the innerHTML property to change the text inside the tags.
You can change HTML attributes very easily. You’re allowed to change ANY HTML attribute whether or not it exists.