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 6 of 6
  1. #1
    New Coder
    Join Date
    Apr 2003
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    createElement() & appendChild

    Can somebody please help me get started with this?

    I would like to build the div below using the preferred W3C DOM methods - createElement() & appendChild, and then insert it into the current document.

    Where do I start?
    Code:
    <div id="sessionCounter">
    
    <p>Your session will expire in -</p>
    
    <p><img id="minutesTens" src="">
    <img id="minutesUnits" src="">
    <img src="img/counter_images/colon.gif">
    <img id="secondsTens" src="">
    <img id="secondsUnits" src="">
    <br><input type="button" id="sessButton" value="Click here" onClick="changeParentVar();"></p>
    </div>
    TIA

    Nick

  • #2
    Regular Coder
    Join Date
    Aug 2002
    Location
    S„o Paulo, Brazil
    Posts
    367
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    var div = document.getElementByID("sessionCounter");
    var p, text, img, br, input;
    
    // First <p>
    p = document.createElement("P");
    text = document.createTextNode('"text goes here");
    p.appendChild(text);
    div.appendChild(p);
    
    // Second <p>
    p = document.createElement("P");
    img = document.createElement("IMG");
    img.id="imgId";
    p.appendChild(img);
    
    //.... and so on
    
    div.appendChild(p);
    Read more about this in a dom-reference .
    /Daniel

  • #3
    New Coder
    Join Date
    Apr 2003
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanx for a very helpful intro.

  • #4
    New Coder
    Join Date
    Apr 2003
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can anyone see why this is failing?
    Code:
    <html>
    
    <head>
    <title>Test Counter</title>
    <style>
    #sessionCounter {
    	position:absolute;
    	z-index:99;
    	width:300px;
    	height:140px;
    	left:50%;
    	top:150px;
    	margin-left:-150px;
    	display:none;
    	text-align:center;
    	background-image:url(img/counter_images/background.gif);
    	background-repeat:no-repeat;
    	padding-top:25px;
    }
    </style>
    
    <script language="javascript">
    var div = document.getElementByID("sessionCounter");
    var p, text, img, br, input;
    
    // First <p>
    p = document.createElement("p");
    text = document.createTextNode("Your session will expire in -");
    p.appendChild(text);
    div.appendChild(p);
    
    // Second <p>
    p = document.createElement("p");
    
    img = document.createElement("img");
    img.id="minutesTens";
    img.src = "1.gif";
    p.appendChild(img);
    
    img = document.createElement("img");
    img.id="minutesUnits";
    img.src = "1.gif";
    p.appendChild(img);
    
    img = document.createElement("img");
    img.src = "img/counter_images/colon.gif";
    p.appendChild(img);
    
    img = document.createElement("img");
    img.id="secondsTens";
    img.src = "1.gif";
    p.appendChild(img);
    
    img = document.createElement("img");
    img.id="secondsUnits";
    img.src = "1.gif";
    p.appendChild(img);
    
    br = document.createElement("br");
    p.appendChild(br);
    
    input = document.createElement("input");
    input.type = "button";
    input.id = "sessButton";
    input.value = "Click here";
    input.onclick = "changeParentVar();";
    p.appendChild(input);
    
    div.appendChild(p);
    </script>
    
    </head>
    
    <body>
    
    <!--<div id="sessionCounter">
    
    <p>Your session will expire in -</p>
    
    <p><img id="minutesTens" src="img/counter_images/0.gif">
    <img id="minutesUnits" src="img/counter_images/0.gif">
    <img src="img/counter_images/colon.gif">
    <img id="secondsTens" src="img/counter_images/0.gif">
    <img id="secondsUnits" src="img/counter_images/0.gif">
    <br><input type="button" id="sessButton" value="Click here" onClick="changeParentVar();"></p>
    </div>-->
    
    <div id="sessionCounter"></div>
    
    </body>
    
    </html>

  • #5
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Because you're doing things too early. With the DOM; the general rule is, all the elements you are working with have to be loaded before you can change them. So, define functions and so on wherever you want, but don' execute things until the document is entirely loaded (you can do things withing the body element, but I think it's better to work through the load event.)

    If you have other scripts that might use the onload event, you can get around that:

    Code:
     // Make sure you don't overwrite any other onload handlers
    function fnAddOnLoad(fnOnLoad){
        var
            fnOldOnLoad=window.onload;
        return (window.onload=function(){
            fnOldOnLoad();
            fnOnLoad();
        }
    }
    
    // And add the thing you want to do on load:
    fnAddOnLoad(function(){
        dothis();
        dothat();
    });
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #6
    New Coder
    Join Date
    Apr 2003
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cheers. I totally missed that in my rush to get something working.


  •  

    Posting Permissions

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