IE < 9 jQuery append / appendTo

**ggalan** · 10-17-2011, 09:33 PM

i have this which works well in all browsers including IE9
but IE 8,7,6 has problems with dynamic dom creation. ive read that IE uses appenTo rather than append jQuery but that doesnt seem to fix it.
any suggestions please, thank you

Code:

<!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 name="description" content=""/> 
<meta name="keywords" content=""/>
<meta name="author" content=""/>
<meta name="copyright" content=""/>		
<title>jump off rock fall 2011</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.onImagesLoad.min.js"></script>
<script>

var surl =  "data.json"; 
var loadedPic = new Object;
var num = 0;

$(document).ready(function() {
	$.getJSON(surl,  function(rtnData) {
		
		var total = rtnData.data.length - 1;
		
		function loader(num){

			loadedPic = rtnData.data[num].img;
			
			var markup = ('<li><img style="display:none;" src="./img/' + loadedPic + '" width="200" height="267"/></li>');
			//$("#recieve ul").append(markup);
			$(markup).appendTo("#recieve ul");
			
			$('#recieve ul li img').onImagesLoad({
				selectorCallback: function(obj) {
					
					$(obj).each(function(){  
						$(this).fadeIn(200);
					});
					
					if(num <= total){
						num++;
						loader(num);
					} 
				} 
			});
		};//loader
		
		loader(num);// start the loading
	});//getJSON
});//document

</script>
</head>
<body>

<div id="recieve"><ul></ul></div>


</body> 
</html>

btw, the plugin says it works well in all IE browsers
http://www.cirkuit.net/projects/jquery/onImagesLoad/