SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change contents of inner Div using innerHTML

    Hello

    I have a page that has a DIV within another DIV. What I am trying to do is change the HTML of the inner DIV but I keep getting a JavaScript error saying the inner DIV has no properties. I thought access to a page element by its ID always worked. Can someone point out to me where my error in logic is here?

    Thanks

    Code:
    <html>
    <head>
    <style type="text/css">
    .container
    {
    	position: absolute;
    	top: 80px;
    	left: 210px;
    	height: 400px;
    	width: 600px;
    	border-color: red;
    	border-style: solid;
    	background-color: #ffffff;
    	padding: 20px 10px 20px 10px;
    	font-family:verdana,sans-serif;
    	font-size:18pt;
    	text-align: center;	
    	z-index: 2000;
    }
    
    .innerBottom
    {
    	position: absolute;
    	height: 50px;
    	width: 90%;
    	border-color: blue;
    	border-style: solid; 
    	bottom: 10px;
    	left: 5%;
    }
    </style>
    
    <script language="JavaScript">
    function buildDIVs()
    {
    	addPageMarkup();
    	
    	document.getElementById( "containerDiv" ).innerHTML = "Container text";
            // this line not working
    	document.getElementById( "innerDiv" ).innerHTML = "Inner Div text";
    }
    
    function addPageMarkup()
    {
    	var body = document.getElementsByTagName( 'body' ).item(0);
    	
    	var containerDiv = document.createElement( 'div' );
    	containerDiv.id	= "containerDiv";
    	containerDiv.className = "container";
    	
    	var divBottom = document.createElement( 'div' );
    	divBottom.id = "innerDiv";
    	divBottom.className = "innerBottom";
    		
    	containerDiv.appendChild( divBottom );
    	body.appendChild( containerDiv );
    }
    </script>
    </head>
    <body>
    
    <a href="javascript: buildDIVs();">Build DIVs</a>
    
    </body>
    </html>

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TryingToLearn View Post
    Hello

    I have a page that has a DIV within another DIV.
    Only until you execute

    document.getElementById( "containerDiv" ).innerHTML = "Container text";,

    at which point the inner div gets hosed.
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the assistance. What I ended up doing is adding a top div that contains the top text. Below is the code.

    If you also donít mind, why is innerHTML on the container DIV hosing the bottom div? The way I understand innerHTML is that it sets HTML between the start and end tags of the object. I did not realize that this over wrote anything else added to the object.

    Code:
    <html>
    <head>
    <style type="text/css">
    .container
    {
    	position: absolute;
    	top: 80px;
    	left: 210px;
    	height: 400px;
    	width: 600px;
    	border-color: red;
    	border-style: solid;
    	background-color: #ffffff;
    	padding: 20px 10px 20px 10px;
    	font-family:verdana,sans-serif;
    	font-size:18pt;
    	text-align: center;	
    	z-index: 2000;
    }
    
    .innerBottom
    {
    	position: absolute;
    	width: 90%;
    	border-color: blue;
    	border-style: solid; 
    	bottom: 10px;
    	left: 5%;
    }
    
    .innerTop
    {
    	position: absolute;
    	width: 94%;
    	border-color: blue;
    	border-style: solid; 
    	top: 10px;
    	left: 3%;
    	vertical-align: top;
    }
    </style>
    
    <script language="JavaScript">
    function buildDIVs()
    {
    	addPageMarkup();
    	
    	document.getElementById( "innerTopDiv" ).innerHTML = "Inner Top Div text";
    	document.getElementById( "innerBottomDiv" ).innerHTML = "Inner Bottom Div text";
    }
    
    function addPageMarkup()
    {
    	var body = document.getElementsByTagName( 'body' ).item(0);
    	
    	var containerDiv = document.createElement( 'div' );
    	containerDiv.id	= "containerDiv";
    	containerDiv.className = "container";
    	
    	var divTop = document.createElement( 'div' );
    	divTop.id = "innerTopDiv";
    	divTop.className = "innerTop";
    	
    	var divBottom = document.createElement( 'div' );
    	divBottom.id = "innerBottomDiv";
    	divBottom.className = "innerBottom";
    		
    	containerDiv.appendChild( divTop );	
    	containerDiv.appendChild( divBottom );
    	body.appendChild( containerDiv );
    }
    </script>
    </head>
    <body>
    
    <a href="javascript: buildDIVs();">Build DIVs</a>
    
    </body>
    </html>

  4. #4
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TryingToLearn View Post
    If you also donít mind, why is innerHTML on the container DIV hosing the bottom div? The way I understand innerHTML is that it sets HTML between the start and end tags of the object. I did not realize that this over wrote anything else added to the object.
    innerHTML represents the entire content of an element, so if you specify that it should consist entirely of a text string, that's what you get.

    I suppose you could have used
    Code:
    document.getElementById( "containerDiv" ).innerHTML = "Container text"+document.getElementById( "containerDiv" ).innerHTML
    but thereafter the inner div would not be addressable. A better way would be to prepend the current content using insertBefore
    Code:
    function buildDIVs()
    {
     addPageMarkup();
    	
     var cd=document.getElementById( "containerDiv" );
    	
     cd.insertBefore(document.createTextNode("Container text"), cd.firstChild);
       
     document.getElementById( "innerDiv" ).innerHTML = "Inner Div text";
    }
    Tab-indentation is a crime against humanity.

  5. #5
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the information. I will have to do more research on the insertBefore method since I was not aware of it. Would you say it is more of an industry trend to use insertBefore instead of creating 2 DIVs within the container div like my previous example shows? I am starting to research more and more about object oriented JavaScript and making the widgets self contained so the more industry standard information I can acquire, the better. Thanks for your time and knowledge regarding this.

  6. #6
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    While this is an old thread, I though I'd add the correct answer because this shows up in google searches.

    The problem is the use of the first appendChild:

    containerDiv.appendChild( divBottom )
    body.appendChild( containerDiv );

    A child is a level below the element it is being appended to. So, divBottom is created inside the div of containerDiv rather than after it. As a result, containerDiv.innerHTML replaces the enclosed divBottom. What you want is:

    body.appendChild( containerDiv );
    body.appendChild( divBottom );


Bookmarks

Posting Permissions

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