id,summary,reporter,owner,description,type,status,priority,milestone,component,version,resolution,keywords,cc,blocking,blockedby
5328,"replaceWith - ""node cannot be inserted ...""",Ghodmode,Ghodmode,"I'm trying to do image replacement on a click event using the replaceWith function and a list of images.  When I click the image disappears entirely and I get the error (in Firebug console window):
'Node cannot be inserted at the specified point in the hierarchy""  code: ""3
http://home/dev/planeticeland/js/jquery-1.3.2.min.js
Line 12'

Here's some code:
HTML:
<div id=""sidebar-form"">
	<div class=""img-wrapper"">
		<img alt=""iceland"" src=""images/Iceland_map_main.png"" usemap=""#map""/>
	</div>

	<map name=""map"">
	<area shape=""circle"" coords=""50,93,7""
		alt=""Reykjavík Area"" title=""Reykjavík Area"" nohref=""nohref"" />


JavaScript:	
var maps = [];
maps['main']                = new Image();
//...
maps['Reykjavík_Area']      = new Image();
//...

for ( i in maps ) {
	var map_name;
	map_name = 'images/Iceland_map_'+i+'.png';
	maps[i].src    = map_name;
	maps[i].useMap = '#map';
}

$(document).ready(function(){
	var areas = $('area');
	for ( var i=0; i<areas.length; i++ ) {
		$(areas[i]).bind('mouseenter mouseleave click', mapHilight);
	};
});

function mapHilight(event){
    $('#sidebar-form .img-wrapper img:first').replaceWith( maps[place.replace(/ /, '_')] );
}


It works fine on the mouseenter and mouseleave events.  The error message only occurs on the click event.

The following code works, but doesn't use jQuery functions:

var sidebar_form = document.getElementById('sidebar-form');
var img_wrapper;
var sidebar_divs = sidebar_form.getElementsByTagName('DIV');
for ( var i=0; i<sidebar_divs.length; i++ ) {
	if (sidebar_divs[i].className == 'img-wrapper') {
		img_wrapper = sidebar_divs[i];
		break;
	}
}
	
var mapImage = img_wrapper.getElementsByTagName('IMG')[0];
img_wrapper.removeChild(mapImage);
img_wrapper.appendChild( maps[place.replace(/ /, '_')] );

It identifies the containing element and the image, removes the image, than appends the replacement image.  Isn't that pretty much what the replaceWith function is supposed to do?

",bug,closed,major,1.4,core,1.3.2,invalid,,ghodmode@…,,