title: Updating HTML Text From JQuery Object
body: <p>I have a simple object created through JQuery:</p>
  
  <pre><code>var userSettings = {
      firstName: "John",
      lastName: "Smith",
      username: "Jsmith"
  };
  </code></pre>
  
  <p>The HTML is quite simple as well:</p>
  
  <pre><code>&lt;p&gt;First Name &lt;span id="firstName"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;p&gt;Last Name &lt;span id="lastName"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;p&gt;Username &lt;span id="username"&gt;&lt;/span&gt;&lt;/p&gt;
  </code></pre>
  
  <p>My question is, how do I write a simple function that will support adding more key/values to the object.  For this example, the function would simply update the text of the corresponding span with the proper ID.</p>
  
  <p><strong>Additionally</strong></p>
  
  <p>Parts of the object will not necessarily going to be handled through .text - is there a way to filter/define what method to use based off of something defined in the object?  For example adding in userColor: red would use .css rather than .text.</p>
  
  <p><a href="http://jsfiddle.net/bce7ubqx/2/" rel="nofollow">JS Fiddle Link</a></p>
  
  <p>Edit: Updated Fiddle with Function</p>