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];




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];


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


Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s

%d bloggers like this: