adding links with javascript

Question

I have h1 tag, which id called "step1". I would like to add link for that with Javascript. So i trying to code with javascript as follow:

    div = document.getElementById('step1');
 newlink = document.createElement('a');
  newlink.setAttribute('class', 'heading');
 newlink.setAttribute('href', 'javascript:showStep(2);');
 div.appendChild(newlink);

But it render only this way. <h2 id="step1">Step<a href="javascript:showStep(1);" class="heading"> in HTML.

Actually I want following result as :

    <h2 id="step1"><a href="javascript:showStep(2);" 
class="heading">Choose Desired Services</a></h2>

So please help me to create this.

I don't know what you did, but your code works fine in my firefox 3.17, even with my IE6. — Reporter
– Reporter, Commented Jun 7, 2011 at 13:55

Pointy · Accepted Answer · 2011-06-07 13:44:33Z

2

If you're just adding an element to trigger some JavaScript behavior, there's absolutely no need for it to be an <a> tag. Just make a <span> and set its "onclick" attribute to the function you want to call:

var div = document.getElementById('step1');
var newlink = document.createElement('span');
newlink.onclick = function() { showStep(2); };
newlink.innerHTML = "Choose Desired Services";
div.appendChild(newlink);

You can also give it a class name etc. so that it can be styled appropriately (pointer cursor, whatever).

Also, don't forget var!!

answered Jun 7, 2011 at 13:44

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

XML guy Over a year ago

but it created as follow. <h2 id="step1">Choose Desired Services<span>Choose Desired Services</span></h2>. I want this only. <h2 id="step1"><span>Choose Desired Services</span></h2>

XML guy Over a year ago

i got it :) I added following code: newlink.innerHTML = "Choose Desired Services"; div.innerHTML = " "; div.appendChild(newlink);

Pointy Over a year ago

Ah I see - yes, that will do it. I didn't realize that the text was already there in your <h1>.

Collectives™ on Stack Overflow

adding links with javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related