PDA

View Full Version : creating divs

Beck
07-17-2002, 08:31 AM
I didn't know if this fell into DOMs, but I was just wondering if there was code for creating a div on the page with its own id, etc, well after the page was loaded.

This includes putting images on the page that weren't originally there, giving them id and style attribute.

I don't just want to plant a bunch of stuff on the page and give it the hidden value or place it -2000 pixels off to the left cause I'm aiming to save a little memory.

Hope to hear from the pros! Thanks in advance.
neil.c
07-17-2002, 11:36 AM
well, you could just document.write() it all, but that won't help save memory cos all the html code for the div will be included in a script. if you want to save file size, you could put the div code in an external javascript (.js) file, this is quite easy, but this file still has to be downloaded and will take up some memory.

the only suggestion i can give to actually save memory is to make a script which document.write()s a script tag for an external .js file after a time delay. the .js won't be downloaded until the time delay is finished. this .js could include the code for document.write()ing the div. like this:

web page:

<html>
<head>
<title>untitled</title>
<script language=javascript>
function fWriteExternalJS{
document.write("<script language=javascript src="div.js"></script>")
}
</script>
</head>
<body onload="setTimeOut(fWriteExternalJS(), 10000); setTimeOut(fWriteDiv(), 15000)>
<!--after 10 secs it loads external script, and after 15 seconds it writes the div.-->
<!--more of page html-->

<!--place you want div to appear-->
<script language=javascript>
fWriteDiv()
</script>

<!--rest of page html-->
</body>
</html>


external .js file (div.js):

function fWriteDiv{
var toWrite = "<div id='blah'>"
toWrite += "<!--more html-->"
toWrite += "</div>"
document.write(toWrite)
}


a bit clumsy as yet, but its an idea. any improvements welcomed.
:thumbsup:
Vladdy
07-17-2002, 01:26 PM
function createDIV(parentID)
{ parentdiv=document.getElementById(parentID);
newdiv=document.createElement('div');
img=document.createElement('img');
img.setAttribute('src','image.jpg');
newdiv.appendChild(img);
parentdiv.appendChild(newdiv);
}


- minimum code just to give you an idea. In order to define the positioning and appearance of the new elements you would need to define a class with desired style attributes and apply it to the new elements. See my page http://www.vladdy.net/webdesign/DOM_Browsers.html for more info on that...
premshree
07-17-2002, 01:36 PM
You could also do this :


<div id="div1"></div>

<script language="JavaScript">
function writeToDiv()
{
if(document.all&&navigator.userAgent.indexOf("Opera")==-1)
{
document.all.div1.innerHTML='<!--HTML content-->';
}
if(document.getElementById&&navigator.userAgent.indexOf("Opera")==-1)
{
document.getElelementById("div1").innerHTML='<!--HTML content-->';
}
}

setTimeout("writeToDiv()",3000);
</script>


:thumbsup: