Function pointers causing an odd error.

Function pointers causing an odd error.

JQuery Version
 jQuery JavaScript Library v1.4.4

Problem
The solution may be blatantly obvious, however I'm scratching my head.
The problem is while doing some code optimisation I came across a loop that called append on a jquery element a few times and it was a rather large loop. So it looked something like this:
  1. var list_of_goodies = [1,2,3,...];
  2. $.each(list_of_goodies, function(val) {
  3.       $('div.toaddto').append(val);
  4.       ...some more code...
  5.       $('div.toaddto').append(otherval);
  6. });
As you can see not really optimised so I tried to use function pointers so it looked something like this:
  1. var list_of_goodies = [1,2,3,...];
  2. var toaddtoAppend = $('div.toaddto').append;
  3. $.each(list_of_goodies, function(val) {
  4.       ... the other code...
  5.       toaddtoAppend(val).append(otherval);
  6. });
It may not seem like a huge optimisation, but it's a large list and this can save a lot of lookup time especially in the older IE's.
This however causes an error.

The Error
  1. this.domManip is not a function
Unfortunately this is from the minified jQuery, so there isn't much more info, it seems to happen within wrapInner() however.

Question
Is this a scope issue or a reference issue? I've tested it without using jQuery and the function pointer worked.
$.each or a for loop end up with the same results. Anyone know where I'm going wrong here?
I know very little about how javascript handles function pointers, especially when they're supposed to be associated to an instance of something as opposed to just static, so forgive any ignorance here.

Browsers Tested In
  • Firefox 3.6
  • IE 6, 7 & 8
  • Chrome 9.0.something
Regardless of the browser the results are always the same, which seems to suggest it's not how the browser is handling the pointer that's causing it to break.

Test it Yourself
  1. <html>
        <head>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
            <script type="text/javascript">   
                $(function(){
                    var iterables = [];
                    for (var i = 0; i < 1000; i++) iterables.push(i);
                    var divAppend = $('#test').append;
                    $.each(iterables, function(val) {
                        divAppend(val);               
                    });
                });       
            </script>
        </head>
        <body>
            <div id="test"></div>
        </body>
    </html>
















Thanks,
dennmat