changes not reflected in JS

Question

I am trying to setup a new "a" component using JS function which is called , using following :

function add_div(data){
    mydiv = document.getElementById("new_twt");
    var link =document.createElement("a");
    var text = "you have new conversations";
    link.setAttribute("name",text);
    link.onclick=function(){new_tweet(data);};
    mydiv.appendChild(link);
  }

Changes are not reflecting on the webpage , however if I use some other element such as button or new div it gets created instantly, am I missing something?

Note that unless you're declaring it somewhere, you're falling prey to The Horror of Implicit Globals with mydiv. — T.J. Crowder
– T.J. Crowder, Commented Dec 6, 2012 at 9:23
Other than the (possible) implicit global and the odd name attribute (did you mean title?), provided you have an element with the id "new_twt" when you call add_div, that looks like it should work. — T.J. Crowder
– T.J. Crowder, Commented Dec 6, 2012 at 9:24
Why the jquery tag when you're doing everything with raw JS? — Barmar
– Barmar, Commented Dec 6, 2012 at 9:35

Dziad Borowy · Accepted Answer · 2012-12-06 09:22:08Z

1

This works for me:

function add_div(data){
    var mydiv = document.getElementById("new_twt");
    var link = document.createElement("a");
    var text = "you have new conversations";
    link.name = text;
    link.href = '#';
    link.innerHTML = 'link';
    link.onclick=function(){ new_tweet(data); return false; };
    mydiv.appendChild(link);
}

I've added link text (innerHTML) so you can actually see the link
I've also added "href" so the link behaves as a link (with this you need to prevent default link action, like "return false" in the event listener, to prevent browser from jumping to the top)

answered Dec 6, 2012 at 9:22

Dziad Borowy

12.6k4 gold badges44 silver badges54 bronze badges

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

4 Comments

Harshit Over a year ago

is it necessary to provide link.href and link.innerHTML

Dziad Borowy Over a year ago

"href" is not required, but without "innerHTML" the link will be empty, so unless you've styled it to be visible (display: block, image bg) you will not see the link.

Harshit Over a year ago

thanks for the help, just in situation i call this function again or thrice the link gets appended 3 times how can I avoid this , i mean is it possible to replace child i.e previous link with same function

Dziad Borowy Over a year ago

give the link a unique ID and before adding it - check if the id exists

Zaheer Ahmed · Accepted Answer · 2012-12-06 09:43:13Z

1

Try this:

var mydiv = document.getElementById("new_twt");
var aTag = document.createElement('a');
aTag.setAttribute('href',"yourlink.htm"); //or #
aTag.innerHTML = "you have new conversations";
aTag.onclick=function(){new_tweet(data);};
mydiv.appendChild(aTag);

Here is working JS Fiddle.

edited Dec 6, 2012 at 9:43

answered Dec 6, 2012 at 9:25

Zaheer Ahmed

28.7k12 gold badges77 silver badges113 bronze badges

Collectives™ on Stack Overflow

changes not reflected in JS

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related