jQuery DOM Objects and Passing by Reference
<p>First let me preface this question by saying that I'm fairly new to Javascript.</p>

<p>I also understand that Javascript objects are passed by reference and primitives are passed by value [<a href="http://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language">source</a>].</p>

<p>That said, here's my question (simplified example):  I'm pulling in JSON data that contains a lot of different information and I need to put each different type of information into a <code>&lt;ul&gt;</code> that's in another <code>&lt;ul&gt;</code> like this:</p>

<pre><code>&lt;ul class="car-tree"&gt;
  &lt;li&gt;
    &lt;label&gt;Sports Cars&lt;/label&gt;
    &lt;ul class="sport-cars"&gt;
      &lt;li&gt;Porsche&lt;/li&gt;
      &lt;li&gt;Mercedes&lt;/li&gt;
      &lt;li&gt;BMW&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;label&gt;Super Cars&lt;/label&gt;
    &lt;ul class="super-cars"&gt;
      &lt;li&gt;Ferrari&lt;/li&gt;
      &lt;li&gt;Lamborghini&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;!-- and so on... --&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I'm grabbing a template for the list above that contains everything except the inner most <code>&lt;li&gt;</code> tags and I'm trying to populate it like this:</p>

<pre><code>var CarView = function(){

  var buildCarTree = function(){

    // Gets the JSON data from somewhere
    var jsonData = grabJsonData();

    // Grab the template and convert it into a jQuery object
    var template = $(grabCarTreeTemplate());

    // Adds sport car data to sports cars list
    this.addCars(template.find('.sports-cars'), jsonData.sportsCars);

    // Adds super car data to sports cars list
    this.addCars(template.find('.super-cars'), jsonData.superCars);

    // Add the car tree to some container
    $('#container-trees').append(template);
  }

  var addCars = function(container, carData){

    for(id in carData){
      $('&lt;li/&gt;', {
        text : carData[id].text
      }).appendTo(container);
    }
  }
};

var view = new CarView();
view.buildCarTree();
</code></pre>

<p>When you do this you get the template without the data being added in, although, if you add in <code>console.log</code> statements through out <code>addCars</code> you can see the data being added to the <code>container</code> argument.</p>

<p>I'm confused because from what I understand from the source I provided above:</p>

<blockquote>
  <p>...if you change the parameter itself...that won't affect the item
  that was  fed into the parameter. But if you change the INTERNALS of
  the parameter,  that will propagate back up...</p>
</blockquote>

<p>and I would have figured that <code>appendTo</code> would be changing the internals of the jQuery object.  What's the deal?</p>
