createElement('a') with a javascript href

21 November 2005   20 comments   Web development

Mind That Age!

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

Powered by Fusion×

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

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

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.

Comments

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.
Anonymous
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.
Anonymous
how to set onclick event?
RCA
newlink.setAttribute('onclick', 'myHandle(this)');
Anonymous
Yes, how DO you add the onclick event?
Mehrbod
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.
RobertZDeveloper
try new.innerHTML = 'link_text' to get the text in there
alfred
thank you very much, but i have a question, what about de text you are going to click?
Anonymous
tn = document.createTextNode('link text');
newlink.appendChild(tn);

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.)
Anonymous
>>>>> 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!!!!
Anonymous
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?

Thanks
43.53
ok
Anonymous
hello i'm trying to create anchor tag in javascript-

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

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?
MrCambron
Ooh ya I needed new.innerHTML = 'some content'. It is not innerHTML(''). For an HTML5 music player on my web project: IntroNoOutro.com
Anonymous
<!DOCTYPE html>
<html>
<body>

<script>

var txt="Chapter 10";
txt.anchor("chap10");
var l=txt.anchor.id;
l="1";
alert(l);

</script>

</body>
</html>
Karissa M
// create the element
    var newLink = document.createElement("a");
    // add the URL attribute
    newLink.setAttribute("href", "http://www.w3.org/DOM/");
    // Add some text
    newText = document.createTextNode("What is DOM?");
    // Add it to the new hyperlink
    newLink.appendChild(newText);
    // Find the place to put it
    placeholder = document.getElementById("myLink");
    // add this to the DOM in memory
    placeholder.appendChild(newLink);
Anonymous
hi I have similar issue on link.click
working fine on Crome but facing issue in IE
Anonymous
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 = "https://twitter.com/darko_atanasov";
// creates text in the li
   var liText = document.createTextNode("linkedIn");
// ads text to a
   newSocialLink.appendChild(liText);
// ads newSocial and newSocialLink to the DOM
   document.getElementById("list").appendChild(newSocial);
   document.getElementById("list").lastChild.appendChild(newSocialLink);
Thank you for posting a comment

Your email will never ever be published


Related posts

Previous:
Major performance fix on file searches 19 November 2005
Next:
Mvbackupfiles - a script to "delete" back autosaved backup files 24 November 2005
Related:
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