Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry I can't get the function appendChild to work :(

    I need help using the appendChild function. In some places it is working for me and some places it is not.

    I have a function that dynamically creates "columns" using floated divs and a clearing break is added to the end of the columns so stuff after the columns go on their own line. This code is working for me.

    Code:
    var numberOfColumns = new Number(document.getElementById("ColumnsDropDownList").options[document.getElementById("ColumnsDropDownList").selectedIndex].value);
    
    	newColumns = document.createElement("div");
    	
    	if(numberOfColumns == 2)
    		newColumns.className = "columns twoColumns";
    	else if(numberOfColumns == 3)
    		newColumns.className = "columns threeColumns";
    	else if(numberOfColumns == 4)
    		newColumns.className = "columns fourColumns";
    			
    	for(var counter = 0; counter < numberOfColumns; counter++)
    	{
    		var newColumn = document.createElement("div");
    		newColumn.className = "column" + (counter + 1);
    		
    		newColumns.appendChild(newColumn);
    	}		
    	
    	//add a clearing break so stuff after the columns go on their own line.
    	var clearingBreak = document.createElement("br");
    	clearingBreak.className = "clearFloat";
    	
    	newColumns.appendChild(clearingBreak);
    However, I'm having problems when I use appendChild later in the program. This function is supposed to add back the clearining break from columns if the clearing break is accidently deleted by the user.

    Code:
    //find all the columns and check to see if they contain an clearing break, if not add it to the columns
    	var allDivs = _iframe.contentWindow.document.getElementsByTagName("div");
    	
    	for(var i = 0; i < allDivs.length; i++)
    	{
    		if(isInClass(allDivs[i], "columns") == true && allDivs[i].childNodes.length > 0)
    		{	
    			var allBRs = allDivs[i].getElementsByTagName("br");
    			
    			var doesClearingBreakExist = false;
    			
    			for(var j = 0; j < allBRs.length; j++)
    			{
    				if(isInClass(allBRs[j], "clearFloat") == true)
    				{
    					doesClearingBreakExist = true;
    					break;
    				}
    			}
    			
    			if(doesClearingBreakExist == false)
    			{
    				var clearingBreak = document.createElement("br");
    				clearingBreak.className = "clearFloat";
    							
    				allDivs[i].appendChild(clearingBreak);
    			}				
    		}
    	}
    The code throws an error when it gets to the line allDivs[i].appendChild(clearingBreak);

    I have no idea why this is happening since allDivs[i] and clearing break are both valid objects. I tried outputing a bunch of stuff with outerHTML and both are producing valid HTML. Could the problem be that I'm trying to use the appendChild function when the parent item is in an array?? Any help would be appreciated as this problem has really been bugging me.

    Dustin Michaels

  • #2
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I figured it out. Since I'm getting a list of all the divs from the _iframe's document i need to create the element using the _iframes document object. This code now works

    var clearingBreak = _iframe.contentWindow.document.createElement("br");
    clearingBreak.className = "clearFloat";
    allDivs[i].appendChild(clearingBreak);


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •