sharing small pieces of rocks or jewels I find on the way

innerHTML and appendChild

Today I noticed an interesting characteristic of appendChild and innerHTML. InnerHTML removes the functions of the element created by javascript. See the code below

var chk = document.createElement(‘input’);

chk.type = “checkbox”;

chk.onclick = function()

                {

                    _categorySelectionChanged = true;

                }

               

chk.value = CATEGORY_NAMES[i];

cTd.appendChild(chk);

 

 

I need to add a name after the check box. So, I did this

cTd.innerHTML = cTd.innerHTML + “ ” + CATEGORY_NAMES[i];

It was working perfect, except the function, onclick was not firing. Everything else was just perfect. Now, when I replaced innerHTML with this

var cName = $$(“div”);

cName.innerHTML = “ ” + CATEGORY_NAMES[i];

cTd.appendChild(cName);

The function was working perfect!!! Both in IE and FF!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: