insertAdjacentHTML

**mauritsgrootveld** · 12-29-2006, 09:04 AM

Hi, I am trying to use insertAdjacentHTML with css...But it seems it is not working very well... everything loads well and no errors. But after inserting some css with insertadjacent I insert a div that has to follow the rules that are set by the previous insertadjacent. This does not work. Does someone know a solution to this? Could you please give me an example? I use the following code:

Code:

function insertScript()
{
	var sHTML='<style type="text/css">body{margin:0;height:100%;overflow-y:auto;padding: 0 16px 0 0;}#menu{display:block;top:0px;left:0px;width:100%;heigth:100%;position:fixed;z-index: 9999;}* html #menu{position:absolute;}</style><!--[if lte IE 6]><style type="text/css">/*<![CDATA[*/ html{overflow-x:auto; overflow-y:hidden;}   /*]]>*/</style><![endif]--><!--[if lte IE 6]><style>/*<![CDATA[*/ #adsie{position:absolute; top:0px; left:0;}/*]]>*/</style><![endif]-->';
	window.document.body.insertAdjacentHTML("afterBegin",sHTML);
	var sCreative='<div id="menu"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="100%" height="100%"><param name="movie" value="hockeystick.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="SCALE" value="exactfit" /><embed src="hockeystick.swf" width="100%" height="100%" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" scale="exactfit"></embed></object></div>';
	window.document.body.insertAdjacentHTML("beforeEnd",sCreative);
}

**Twey** · 12-29-2006, 12:56 PM

insertAdjacentHTML() is IE-only and treats the DOM as a string, so you should avoid it. Use DOM methods instead.

**mauritsgrootveld** · 01-04-2007, 11:36 AM

Ok, i got it working with this code:

Code:

var sHTML = '<style type="text/css">body{margin:0;height:100%;overflow-y:auto;padding: 0 16px 0 0;}#hockeystick{display:block;top:0px;left:0px;width:100%;heigth:100%;position:fixed;z-index: 9999;}* html #hockeystick{position:absolute;}</style><!--[if lte IE 6]><style type="text/css">/*<![CDATA[*/ html{overflow-x:auto; overflow-y:hidden;}/*]]>*/</style><![endif]--><!--[if lte IE 6]><style>/*<![CDATA[*/ #adsie{position:absolute; top:0px; left:0;}/*]]>*/</style><![endif]-->';
window.document.write(sHTML);

var sCreative='<div id="hockeystick"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="100%" height="100%"><param name="movie" value="http://www.dqatestsite.nl/test/hockeystick.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="SCALE" value="exactfit" /><embed src="http://www.dqatestsite.nl/test/hockeystick.swf" width="100%" height="100%" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" scale="exactfit"></embed></object></div>';
//window.document.body.insertAdjacentHTML("beforeEnd",sCreative);
document.body.innerHTML = document.body.innerHTML + sCreative;

but this only works on pages with this doctype declaration:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

and the site where it has to placed has:

Code:

<?xml version="1.0"?>

or

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

or even both...

Does anyone know how to work around this???

**Twey** · 01-04-2007, 04:11 PM

but this only works on pages with this doctype declaration:

One of the reasons I suggested using DOM methods.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Please, stay away from transitional DOCTYPEs. The transitional period from HTML 3 to HTML 4 ended a long time ago. There's no reason to use anything but valid HTML Strict:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML also has problems, the main one being that it's totally unsupported by IE, currently the most popular browser.

the site where it has to placed has [an XML prolog] or [an HTML 4.0 Transitional DOCTYPE] or even both...

It should have neither, and certainly not both. The XML prolog is valid only in XHTML.

Thread: insertAdjacentHTML

Thread Tools

Search Thread

insertAdjacentHTML

Bookmarks

Bookmarks

Posting Permissions