Javascript appendChild adds an element to the DOM twice?

Question

I've got this code (TH is my table header DOM element):

var typeIndicator = document.createElement('span');
typeIndicator.innerText = "A";
TH.appendChild(typeIndicator);

What happens is it appends 2 <span> elements instead of one. Anyone had this problem before?

Check the code that uses the one you've shown; there's nothing wrong with it here. — raina77ow, Oct 05 '15 at 13:29
How is this snipplet of code called. The issue is somewhere else. My guess is you somehow bound the event handler more than once. — epascarello, Oct 05 '15 at 13:31
Example code is neither complete nor verifiable. [How to create a MCVE](http://stackoverflow.com/help/mcve) — Gui Imamura, Oct 05 '15 at 13:39

score 1 · Answer 1 · answered Oct 05 '15 at 13:38

1

Most of the time double or multiple events triggering means that somewhere in your code you are assigning the same event listener more than once.

First check your loops (if you have any), then I can advise you to put a debugger; statement just above your snippet and debug the program flow using the browser's developer tools.

P.S.: I would have commented instead of answering, if I only had enough reputation. If you could please add some context to your snippet (like some more enclosing code or even try reproducing your issue in a jsFiddle) I may be able to expand my answer.

answered Oct 05 '15 at 13:38

LaXiS

11
1
3

Thank you for the swift reply! I found the problem: the function is called twice :( Now I am looking for a way to check if the TH node has a child of type 'span', to put as an extra check before executing the code block. – bitstream Oct 05 '15 at 13:45
@bitstream I may redirect you to this question on SO: [How to check if element exists in the visible DOM?](http://stackoverflow.com/questions/5629684/how-to-check-if-element-exists-in-the-visible-dom) but I would suggest you to consider using a framework like jQuery if you don't have any specific requirement for your project. – LaXiS Oct 05 '15 at 13:56

Javascript appendChild adds an element to the DOM twice?

1 Answers1