jquery append

<script>//<![CDATA[   
$(document).ready(function(){
        // Extend offset function
        jQuery.fn._offset = jQuery.fn.offset;
        jQuery.fn.extend({
            offset: function() {
                var a = arguments;
                return (a.length) ? this.animate({ top: a[0].top || a[0], left: a[0].left || a[1] }, (a[0].top ? a[1] : a[2]) || 1) : this._offset();
            }
        });
        // end
        
        // First thing will be to load items from the cookie showShortList()
        // Store as array [RefNo: Title, etc.] then construct <li></li> etc. from this
        
        $('.addToShortList').click(function () { 
        
                var myId = $(this).attr('id') ;
                var theId = myId.replace('_lnk', '');
                var myTitle =  $(this).attr('title') ;
                
                //Don't add the same item again.. [i think that there is a cooler wya to do this]
                var myLi = $('#' + theId + '_li').html();
                if (myLi){
                        //this doesn't work on the first click?! we need a better test
                        $('#'+myId).mousedown(function(){$('#' + theId + '_li').css('background','#fef8a5')});
                        $('#'+myId).mouseup(function(){$('#' + theId + '_li').css('background','')});
                        return;
                }
                
                // create div for the animation
                var spigot = $(this).after('<div id="' + theId + '_spg" style="left:' + $(this).offset().left + '; top:' + $(this).offset().top + '; position: absolute; background:#fef8a5; z-order: 6000; ">' + myTitle + '</div>');
                $('#'+ theId + '_spg').offset((($('#shortlist').offset().top)-110), (($('#shortlist').offset().left)-0), 400);
                $(this).animate({opacity: "0.3"}, 500);
                
                //I.E seems to require display:none; followed by .show/slideDown event. FF is OK without!
                $('#shortlist').prepend('<li id="' + theId + '_li" style="display:none;">' + myTitle + ' <a href="#" class="dynAdded" onclick="removeItem(this); return false;" title="Remove">[-]</a></li>');
                $('#'+  theId + '_li').slideDown("slow");
                $('#'+ theId + '_spg').fadeOut('fast',  function(){$(this).remove()});				  
                
                
                //alert($(this).offset().top + ', ' + $(this).offset().left + ' >>> ' + $('#shortlist').offset().top + ', ' + $('#shortlist').offset().left);
                //var msg = $('#shortlist').offset().top + ', ' + $('#shortlist').offset().left + '\n';
                //msg += $('#'+ theId + '_spg').offset().top + ', ' + $('#'+ theId + '_spg').offset().left;
                //alert(msg);
                
                //N.B. The page should load the cookie and then set the Add2ShortList buttons to opacity 0.3 - so's you know.. :) use .each fn
				
                $.cookie('shortlist', theId+","+myTitle); 
				
				  if( $("#btnClear").length <= 0 ) 
					$('#shortlist').append('<input type="button" name="btnClear" id="btnClear" value="Clear"/>');					
				  if( $("#btnEdit").length <= 0 ) 
					$('#shortlist').append('<input type="button" name="btnEdit" id="btnEdit" value="Save/Edit" />');
		
			     $('#btnClear').click( function(){                 
                  $('.dynAdded').each( function(){removeItem(this)} );						   
       });
        });
		
					
 
       $('#chkAll').click( function(){      
                $('.addToShortList').each(function () { 
     
                        var myId = $(this).attr('id') ;
                        var theId = myId.replace('_lnk', '');
                        var myTitle =  $(this).attr('title') ;
                        
                        //Don't add the same item again.. [i think that there is a cooler wya to do this]
                        var myLi = $('#' + theId + '_li').html();
                        if (myLi){
                                //this doesn't work on the first click?! we need a better test
                                $('#'+myId).mousedown(function(){$('#' + theId + '_li').css('background','#fef8a5')});
                                $('#'+myId).mouseup(function(){$('#' + theId + '_li').css('background','')});
                                return;
                        }
                        
                        // create div for the animation
                        var spigot = $(this).after('<div id="' + theId + '_spg" style="left:' + $(this).offset().left + '; top:' + $(this).offset().top + '; position: absolute; background:#fef8a5; z-order: 6000; ">' + myTitle + '</div>');
                        $('#'+ theId + '_spg').offset((($('#shortlist').offset().top)-110), (($('#shortlist').offset().left)-0), 400);
                        $(this).animate({opacity: "0.3"}, 500);
                        
                        //I.E seems to require display:none; followed by .show/slideDown event. FF is OK without!
                        $('#shortlist').prepend('<li id="' + theId + '_li" style="display:none;">' + myTitle + ' <a href="#" class="dynAdded" onclick="removeItem(this); return false;" title="Remove">[-]</a></li>');
                        $('#'+  theId + '_li').slideDown("slow");
                        $('#'+ theId + '_spg').fadeOut('fast',  function(){$(this).remove()});
                        
                        
                });
					if( $("#btnClear").length <= 0 ) 
						$('#shortlist').append('<input type="button" name="btnClear" id="btnClear" value="Clear"/>');					
					if( $("#btnEdit").length <= 0 ) 
						$('#shortlist').append('<input type="button" name="btnEdit" id="btnEdit" value="Save/Edit" />');
					$('#btnClear').click( function(){                 
						$('.dynAdded').each( function(){removeItem(this)} );						   
					});
				
        });
		
		
		
		
		
			
 });
  
function addAllToShortList(el){
	
}
 
 
function removeItem(el){
 
	var myId = $(el).parent().attr('id') ;
	var theId = myId.replace('_li', '');
	
	$('#'+myId).slideUp("slow", function(){$(this).remove()});
	$('#'+theId+'_lnk').animate({opacity: "1.0"}, 500);
	
}
	
// We need to save the list to the cokie after adding/removing anything saveShortList()
// PLUS	: we need a button for removeAll items (i.e. clear shortList)
//		: postshortList - [i.e. send list of ISBNs to listAdmin
//		: Add two icons to Shortlist menubar 'Clear' & 'Save'  [see NETSITY pages]
//		: Move the '[-]' remove link to the left and trim the 'title' text to no more than n characters
//		: create an AddAll button to add all listed items [.each fn] on the page
//		: not vital but the offset in IE is wrong - something to do with absolute positioning..
//		: the shortlist will ned to bable to scroll [see NETSITY pages]
 
// ]]>
</script>

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133: