'Node cannot be inserted at the specified point in the hierarchy' Error

JavaScript
1

Hey guys, I keep getting the vaunted ‘Node cannot be inserted at the specified point in the hierarchy’ execption from firefox with this script. I suspect it is because I am doing something dumb here, but my javascript skills are substandard and I cannot seem to figure out what. Let me know what I need to do with the below scripts to get them to work properly:


function Ad() {
	var altText;
	var navigateUrl;
	var bannerUrl;
	var width=120;
	var height=60;
}

Ad.prototype.createAd=function()
	{
		var adNode=document.createElement('a');
		adNode.href=this.navigateUrl;
		adNode.target="_blank";
		var imgNode=document.createElement('img');
		imgNode.src=this.bannerUrl;
		imgNode.height=this.height;
		imgNode.width=this.width;
		imgNode.altText=this.altText;
		adNode.appendChild(imgNode);
		return adNode;
	}

function AdManager()
{
	this.ads=new Array();
}

AdManager.prototype.addAd=function(ad)
	{
		this.ads.push(ad);
	}

AdManager.prototype.getRandomAd=function()
	{
		var ad=Math.floor(Math.random()*(this.ads.length))
		return this.ads[ad];
	}
	
AdManager.prototype.showAd=function(container)
	{
		var theAd=this.getRandomAd();
		container.appendChild(theAd);
	}

function createAds()
{
	var manager=new AdManager();

	var tmpad=new Ad();
	tmpad.altText="Ad1";
	tmpad.navigateUrl="http://www.example.com/ad1";
	tmpad.bannerUrl="ad1.gif";
	tmpad.height=600;
	tmpad.width=120;
	manager.addAd(tmpad);
	
	tmpad=new Ad();
	tmpad.altText="Ad2";
	tmpad.navigateUrl="http://www.example.com/ad2";
	tmpad.bannerUrl="ad2.gif";
	tmpad.width=120;
	tmpad.height=600;
	manager.addAd(tmpad);
	
	return manager;
}

function insertAd(manager, element)
{
	manager.showAd(element);	
}

//Globals
var adManager=createAds(adManager);



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Js Ad insertion</title>
<script src="adInsertion.js" type="text/javascript"></script>
</head>
<body onload="insertAd(adManager, document.getElementById('adcontainer'));">
	<p>This should show a random ad.</p>
	<div id="adcontainer">
	</div>
</body>
</html>
2

Your showAd is trying to add the Ad object to the div, rather then add the Element that createAd returns for the given Ad.


//change from
container.appendChild(theAd);
//to
container.appendChild(theAd.createAd());
3

Argh, I knew it was something absolutely stupid. There are reasons why I like strongly typed, compiled languages . . .

4

Next question–that seems to get the node appending, but the image is showing up at 1x19 rather than the supplied size. Any protips?

EDIT: Nevermind. Helps when you have the images in the right folder.

5

even if the image doesn’t exist, the placeholder should still be the same size. I copied and pasted your code directly into Edit Plus and it showed the image placeholder correctly (ie)