Javascript Create A Hyperlink Element

Posted by blogmeister on

September 22, 2008

Creating a hyperlink element using Javascript is pretty simple. Do the following. Notice, that the hyperlink element contains two text ‘click me’ that’s been set twice. This is because IE only accepts its proprietary innerText property to set a hyperlink’s text while other browsers use textContent. To set a CSS class name, you need to use the className attribute because the class property is a reserved word in Javascript. You can either use it as element.classname = 'class_name' or element.setAttribute('className', 'class_name');

<body>
<div id="div"></div>
</body>

<body>

</body>

<script>
div = document.getElementById('div');
a = document.createElement('a');
a.innerText = 'click me';
a.textContent = 'click me';
a.href = 'javascript://';
a.setAttribute('className', 'more_right');
a.setAttribute('onclick', 'alert("clicked");');
div.appendChild(a);
</script>

div = document.getElementById('div');

a = document.createElement('a');

a.innerText = 'click me';

a.textContent = 'click me';

a.href = 'javascript://';

a.setAttribute('className', 'more_right');

a.setAttribute('onclick', 'alert("clicked");');

div.appendChild(a);

</script>

Found this useful? Donations appreciated to help keep this blog alive.

tags: firefox, hyperlink, ie

7 Responses to “Javascript Create A Hyperlink Element”
you will make more money if you will use your knowledge in creating a business website that can be interesting for a lot of people. Why dont you make a website where can poeple can view movies for free.

Computer and Electronics
Personal Blog Money
Seek Health. Feel Great

By anneberly on Sep 22, 2008
i don’t think i have the finances for that anne he he he

By tech on Sep 22, 2008
I have read a few of the articles on your website now, and I really like your style of blogging. I added it to my favorites blog site list and will be checking back soon. Please check out my site as well and let me know what you think.

By Darius Caughron on Apr 11, 2010
thank you for your article,My problem has been resolved.

By Chelsey Fjeseth on Apr 19, 2010
This is exactly what I have spent a day to find, but can’t seem to make it work. It loads the page without error, but no link appears. How do you apply it in a web page?

Thanks in advance…

Here is what I put together from what you posted:

div = document.getElementById(‘div’);

a = document.createElement(‘a’);
a.innerText = ‘click me’;
a.textContent = ‘click me’;
a.href = ‘javascript://’;
a.setAttribute(‘className’, ‘more_right’);
a.setAttribute(‘onclick’, ‘alert(“clicked”);’);

div.appendChild(a);

By Dallas Tanner on Mar 2, 2011
Sorry - I did copy the whole page, but that’s not what it posted. Could you just use the code in a working example for newbies like me to mimic? Thanx again!

By Dallas Tanner on Mar 2, 2011
@Dallas: hi. the html code was a shortcut, i figured having the div tags alone would work. you can add tags between the div tags.

i updated the html code above

By tech on Mar 4, 2011