Javascript "gotcha's" when creating elements dynamically in DOM

arianhojat · April 16, 2007

I noticed always the same 'simple' javascript issues come up when trying to create html nodes via DOM and have to do soem workarounds to get it to work in both IE/FF.

Would be nice to have a list of common problems (either hacks have to use in IE or common mistakes where you think it should work but doesnt for a good reason).

If you wanna paste here other stuff or fix what i thought were common issues:

Heres a couple:

#########################################

Like for example for setting an element's class:

theElement.setAttribute("class", "nav"); //does not work in IE i think but...

theElement.className = "nav"; //className property works in both

####################

//Also I think its better to set id based on property (at least a few tutorials said that, not sure if IE doesnt like setAttr method for setting id?)

theElement.setAttribute("id", "navID");

theElement.id = "navID";

####################

Any other properties that need special care in DOM scripting?, like

.disabled, .defaultSelected, .selected, etc? i remember running into issues with maybe some of them.

#########################################

To set an onclick to include a dynamic runtime var created, following is wrong:

//...pretend an onchange maybe causes an AJAX rrequest to bring in XML and put into ages array... then

for(var i=0; i <ages.length; i++)

{

var age = ages;

//then pretend there is initialization code here for creating the theElement.

theElement.onclick = function(){ alert('You are'+ getBirthDate(age) +' years old.'); };//at runtime, age var doesnt exist anymore

}

for(var i=0; i <ages.length; i++)

{

var age = ages;

//then pretend there is initialization code here for creating the theElement.

theElement.storedAge = age;

theElement.onclick = function(){ alert('you are'+ getBirthDate(this.storedAge) +' years old.'); }; //knows what it is at runtime when clicked

}

#########################################

Noticed alot are covered specifically for IE here (as most of the problems relate to hacking code for IE so it works in both FF/IE):

http://channel9.msdn.com/wiki/default.aspx/Channel9.InternetExplorerProgrammingBugs

arianhojat · July 6, 2007

Here's another one I ran into recently:

#########################################

Have to set a dynamically created form input field's name with extra javascript IF you are need that input field be4 u submit form.

Its almost like it creates the name value in DOM but its hidden so you can find the node.

Yet if you submit the form, the value is available as GET/POST variable under appropriate name.

http://www.phpfreaks.com/forums/index.php/topic,147941.msg635224.html#msg635224

#########################################

Not sure why but i have trouble deselecting select values which werent even dynamically set,

Like i click and select a value, and now i want to deselect it via javascript.

IE doesnt seem to like looping through and deselecting the values.

FF unsets the select with all 3 functions i try. IE goofs up on all but the last (but i wasnt sure if the last is

the best approach).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
<script type="text/javascript">

function deselectList1(listID)
{
        var optionsList = listID.getElementsByTagName('option');

        for (i = optionsList.length - 1; i>=0; i--) //for(var i=0; i <
options.length; i++)
        {
                optionsList[i].selected = false;
        }

}

function deselectList2(listID)
{
        var optionsList = listID.getElementsByTagName('option');

        optionsList[listID.selectedIndex].selected = false;
}

function deselectList3(listID)
{
        var optionsList = listID.getElementsByTagName('option');

        try
        {
                listID.selectedIndex = -666;
        }catch (e)
        {
                //alert('length'+ optionsList.length)
                for (i = optionsList.length - 1; i>=0; i--) //for(var i=0; i <
options.length; i++)
                {
                        optionsList[i].selected = false;
                }
        }

}

</script>
</head>

<body>
        <select size="5" name="test" id="test">
                <option>AAAA</option>
                <option>BBBB</option>
                <option>CCCC</option>
        </select>
        <input name="btn" type="button" value="unselect list"
onclick="deselectList1(document.getElementById('test'));" />
</body>
</html>

#########################################

roopurt18 · July 6, 2007

I don't have a specific example in mind, but I've had situations in the past where I've set DOM properties before insertion into the document and those properties have then been reset after insertion into the document. Just another thing to watch out for.

Sign In

Javascript "gotcha's" when creating elements dynamically in DOM

Recommended Posts

arianhojat

Link to comment

Share on other sites

arianhojat

Link to comment

Share on other sites

roopurt18

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information