createElement('a') with a javascript href

21 November 2005   22 comments   Web development

Mind that age!

This blog post is 17 years old! Most likely, its content is outdated. Especially if it's technical.

In Javascript, have you ever needed to create a hyperlink element like this?:

div = document.getElementById('foo');
newlink = document.createElement('a');

That snippet doesn't do much. It just creates a hyperlink element with no href, class, title or content. Let's make it a bit more useful:

newlink = document.createElement('a');
newlink.setAttribute('class', 'signature');
newlink.setAttribute('href', 'showSignature(xyz)');

The problem with this code is that the href becomes a link to a page called showSignature(xyz) and not a javascript function call to the function showSignature() with parameter xyz.

Solution, which took me some time to figure out, is that you have to use the javascript: prefix on the href for it to become an active javascript function caller. So this is how it should be:

newlink = document.createElement('a');
newlink.setAttribute('class', 'signature');
newlink.setAttribute('href', 'javascript:showSignature(xyz)');

But I've got a sneaky feeling there's something wrong with this. Using the javascript: prefix feels a bit 1999. Can someone fill in my brainblanks on this?

UPDATE Just realised what would have been much better; set the href to # and use the onclick event instead. Problem solved.


Carlos Blas

FYI: I am writting a JSP that also dynamically creates an <a href> element and found that the href="#" did not work, but the href="javascript:function" did work. Thanks for the help.


You should never set an href to # for a javascrpit event. You were right to set an onclick event, but the href should really be javascript:void(0) to avoid refresh issues.


how to set onclick event?


newlink.setAttribute('onclick', 'myHandle(this)');


Yes, how DO you add the onclick event?


Apparently it works but because we cannot set 'Text' property/attribute of <a> tag we cannot see the generated hyperlinks. That would be great if someone can let me know how to set it.


try new.innerHTML = 'link_text' to get the text in there


thank you very much, but i have a question, what about de text you are going to click?


tn = document.createTextNode('link text');

That will create the clickable text.

Sam P.

Actually, you should use # for href. The point is that you can avoid using old 'javascript:<...>' style links.

Make sure to 'return false' from your onclick event to prevent submitting your link and any page refresh issues.

Even better, change the # to a POST URL so that it works for people w/o a JS-enabled browser (webphones, etc.)


>>>>> Even better, change the # to a POST URL so that it works for people w/o a JS-enabled browser (webphones, etc.)

if they don't have javascript enabled then the element will not be created!!!!


I had a problem getting the onclick to work in IE when created with setAttribute. I used this and it worked:

newlink.onclick = function (e) { myHandle(this); }

Don Don

How to make the link with the attribute of target="_new" ? the

newlink.setAttribute('href', 'xyz.html')

would not suffice?





hello i'm trying to create anchor tag in javascript-

var div1=document.getElementById("tabarea");
var tab=document.createElement("a");
tab.innerHTML="<a class=\""+"tab"+"href=\""+"a.html"+"\></a>"

here i'm trying to add a tab dynamically(which is my custom tag,created using 'a' tag ) to my tab area.if i add text,button it gets added, but 'a' tag :(
can anyone please help?


Ooh ya I needed new.innerHTML = 'some content'. It is not innerHTML(''). For an HTML5 music player on my web project:


<!DOCTYPE html>


var txt="Chapter 10";



Karissa M

// create the element
    var newLink = document.createElement("a");
    // add the URL attribute
    newLink.setAttribute("href", "");
    // Add some text
    newText = document.createTextNode("What is DOM?");
    // Add it to the new hyperlink
    // Find the place to put it
    placeholder = document.getElementById("myLink");
    // add this to the DOM in memory


hi I have similar issue on
working fine on Crome but facing issue in IE


Here I am creating inside my ul ("list") a new li and a new a at the end. I'm in the process of learning javascript and am happy like a small child couse I just fixed it :)

//creates new li and new a
   var newSocial = document.createElement("li");
   var newSocialLink = document.createElement("a");
// ads property to the href attribute
   newSocialLink.href = "";
// creates text in the li
   var liText = document.createTextNode("linkedIn");
// ads text to a
// ads newSocial and newSocialLink to the DOM

Lane Pemberton

Nice. I love that this post is useful 13 (!) years later. Thank you!



Your email will never ever be published.

Related posts