createElement() & appendChild

nnichols

10-23-2003, 01:30 PM

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?

<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

Danne

10-23-2003, 01:50 PM

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 (http://www.mozilla.org/docs/dom/domref/dom_el_ref.html#1023967) .

nnichols

10-23-2003, 02:43 PM

Thanx for a very helpful intro.

nnichols

10-23-2003, 03:54 PM

Can anyone see why this is failing?
<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"></div>

</body>

</html>

liorean

10-23-2003, 05:22 PM

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:

// 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();
});

nnichols

10-24-2003, 11:04 AM

Cheers. I totally missed that in my rush to get something working.