createElement('a') with a javascript href

21 November 2005   20 comments   Web development

Powered by Fusion×

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
Thank you for posting a comment

Your email will never ever be published

Related posts

Major performance fix on file searches 19 November 2005
Mvbackupfiles - a script to "delete" back autosaved backup files 24 November 2005
setAttribute('style', ...) workaround for IE 08 January 2007
DOM Scripting 05 December 2005
IssueTrackerProduct feature list 02 December 2005
firstChild.nodeValue vs. innerHTML 10 September 2005
Add links to a text with URLs 03 November 2004