Dynamically Create Link Javascript

Question

I'm trying to set my text as a link so that when I click on it, it runs a function. Right now I just have it set to google.com to try to get the text to appear as a link, but it doesn't seem to be doing anything at all. It's just static text. Any suggestions?

        var leftDiv = document.createElement("div"); //Create left div
        leftDiv.id = "left"; //Assign div id
        leftDiv.setAttribute("style", "float:left; width:66.5%; line-height: 26px; text-align:left; font-size:12pt; padding-left:8px; height:26px;"); //Set div attributes
        leftDiv.style.background =  divColor;
        a = document.createElement('a');
        a.setAttribute('href', 'google.com');
        user_name = a.appendChild(document.createTextNode(fullName + ' '));

        leftDiv.appendChild(user_name); // Add name to left div

A link to another site, I think, has to use a full URI/domain name: google.com needs to be http://google.com for the href to link to Google. — David Thomas
– David Thomas, Commented Mar 22, 2012 at 21:50
You are never inserting the link into the document, only the text node. a.appendChild returns the node just appended. — Felix Kling
– Felix Kling, Commented Mar 22, 2012 at 21:55

Simon Edström · Accepted Answer · 2012-03-22 21:55:04Z

27

Look at this example:

http://jsfiddle.net/ajXEW/

I added some comments inside the code that explain the diffrent steps.

    var leftDiv = document.createElement("div"); //Create left div
    leftDiv.id = "left"; //Assign div id
    leftDiv.setAttribute("style", "float:left; width:66.5%; line-height: 26px; text-align:left; font-size:12pt; padding-left:8px; height:26px;"); //Set div attributes
    leftDiv.style.background =  "#FF0000";
    a = document.createElement('a');
    a.href =  'google.com'; // Insted of calling setAttribute 
    a.innerHTML = "Link" // <a>INNER_TEXT</a>
    leftDiv.appendChild(a); // Append the link to the div
    document.body.appendChild(leftDiv); // And append the div to the document body

answered Mar 22, 2012 at 21:55

Simon Edström

6,6178 gold badges34 silver badges52 bronze badges

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

3 Comments

JAT86 Over a year ago

Why is a = document.createElement('a'); not var a = document.createElement('a'); ?

Jin Thakur Over a year ago

var a and a is same var is optional in javascript

Heretic Monkey Over a year ago

Without var, this code creates a variable on the global scope. So this code creates a window.a variable that anyone else can overwrite and modify at any time during the running of this code.

GoldenNewby · Accepted Answer · 2012-03-22 21:53:47Z

1

Try this out: http://jsfiddle.net/HknMF/5/

var divColor = "red";
var fullName = "bob";

var leftDiv = document.createElement("div"); //Create left div
        leftDiv.id = "left"; //Assign div id
        leftDiv.setAttribute("style", "float:left; width:66.5%; line-height: 26px; text-align:left; font-size:12pt; padding-left:8px; height:26px;"); //Set div attributes
        leftDiv.style.background =  divColor;
        a = document.createElement('a');
        a.setAttribute('href', 'google.com');
        a.appendChild(document.createTextNode(fullName + ' '));

        leftDiv.appendChild(a); // Add name to left div

    document.body.appendChild(leftDiv);

answered Mar 22, 2012 at 21:53

GoldenNewby

4,4728 gold badges36 silver badges44 bronze badges

Collectives™ on Stack Overflow

Dynamically Create Link Javascript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related