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

Post your own comment
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);

Lane Pemberton

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

R.John

THANKS EVERYBODY :-)

Your email will never ever be published.

Related posts

Go to top of the page