Example of dynamically creating DOM elements in js

Code

// More javascript from http://www.smallrain.net
Function sAlert (str ){
Var msgw, msgh, bordercolor;
Msgw = 400; // The width of the prompt window.
Msgh = 100; // The height of the prompt window.
Titleheight = 25 // The title height of the prompt window
Bordercolor = "# c51100"; // The border color of the prompt window.
Titlecolor = "# c51100"; // The title Color of the prompt window

Var sWidth, sHeight;
SWidth = screen. width;
SHeight = screen. height;

Var bgObj = document. createElement ("div ");
BgObj. setAttribute ('id', 'bgdiv ');
BgObj. style. position = "absolute ";
BgObj. style. top = "0 ";
BgObj. style. background = "# cccccc ";
BgObj. style. filter = "progid: DXImageTransform. Microsoft. Alpha (style = 3, opacity = 25, finishOpacity = 75 ";
BgObj. style. opacity = "0.6 ";
BgObj. style. left = "0 ";
BgObj. style. width = sWidth + "px ";
BgObj. style. height = sHeight + "px ";
BgObj. style. zIndex = "10000 ";
Document. body. appendChild (bgObj );

Var msgObj = document. createElement ("div ")
MsgObj. setAttribute ("id", "msgDiv ");
MsgObj. setAttribute ("align", "center ");
MsgObj. style. background = "white ";
Msgobj. style. Border = "1px solid" + bordercolor;
Msgobj. style. Position = "absolute ";
Msgobj. style. Left = "50% ";
Msgobj. style. Top = "50% ";
Msgobj. style. font = "12px/1.6em verdana, Geneva, Arial, Helvetica, sans-serif ";
Msgobj. style. marginleft = "-225px ";
Msgobj. style. margintop = -7520.document.doc umentelement. scrolltop + "PX ";
Msgobj. style. width = msgw + "PX ";
MsgObj. style. height = msgh + "px ";
MsgObj. style. textAlign = "center ";
MsgObj. style. lineHeight = "25px ";
MsgObj. style. zIndex = "10001 ";
MsgObj. style. position = "absolute ";

Var box = document. getElementById (str );
Var title = document. createElement ("h4 ");
Title. setAttribute ("id", "msgTitle ");
Title. setAttribute ("align", "right ");
Title. style. margin = "0 ";
Title. style. padding = "3px ";
Title. style. background = bordercolor;
Title. style. filter = "progid: DXImageTransform. microsoft. alpha (startX = 20, startY = 20, finishX = 100, finishY = 100, style = 1, opacity = 75, finishOpacity = 100 );";
Title. style. opacity = "0.75 ";
Title. style. border = "1px solid" + bordercolor;
Title. style. height = "18px ";
Title. style. font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif ";
Title. style. color = "white ";
Title. style. cursor = "pointer ";
Title. onmousedown = function () {startDrag (this, 'msgdiv ')};
Title. onmouseup = function () {stopDrag (this, 'msgdiv ')};
Title. onmousemove = function () {drag ('msgdiv ')};
Var closer = document. createElement ("div ");
Closer. onclick = function (){
CloseReturn ();
Document. body. appendChild (box );
Box. style. display = "none ";
Document. body. removeChild (bgObj );
Document. getElementById ("msgDiv"). removeChild (title );
Document. body. removeChild (msgObj );
};
Closer. innerHTML = "OK ";
Document. body. appendChild (msgObj );
Document. getElementById ("msgDiv"). appendChild (title );
Document. getelementbyid ("msgtitle"). appendchild (closer );
Box. style. Display = "inline ";
Document. getelementbyid ("msgdiv"). appendchild (box );
Showreturn ();
}