Updates elements on a page. Nice for updating values retrieved with ajax.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



Updates elements on a page. Nice for updating values retrieved with ajax.


You have 150 followers.

<p>You have <span data-update-id="twitter" data-update-key="followers">150</span> followers.</p>
var data = {
  followers: 200

var updater = new ElementUpdater('twitter').update(data);

Will result in:

You have 200 followers.

<p>You have <span data-update-id="twitter" data-update-key="followers">200</span> followers.</p>

Advanced Usage

ElementUpdater supports advanced finders, inspired by JSONQuery but more logically suited and simplified for this purpose. It's easy to learn, don't worry.

The format of your data-update-key attributes can be a lot like jQuery:

  • people[name='Joe'] will find the object in the people array with a 'name' of 'Joe
  • people[name="Joe"].phone_numbers[type="Work"] works too
  • Or, you can keep it simple and just do people[joe] or people.joe.
<p>Joe's mother's name is <span data-update-id="joe" data-update-key="mothers[child='Joe'].name"></span></p>
var data = {
  mothers: [{
    child: 'Joe',
    name: 'Barbara'

var updater = new ElementUpdater('joe').update(data);

Joe's mother's name is Barbara.

<p>Joe's mother's name is <span data-update-id="joe" data-update-key="mothers[child='Joe'].name">Barbara</span></p>

Usage with AJAX

$.getJSON('http://example.com/data.json', function(data) {
  // data = {cubs: 1, red_sox: 0}
  new ElementUpdater('game-score').update(data);
<ul id="game-score">
  <li>CHC: <span data-update-id="game-score" data-update-key="cubs">0</li>
  <li>BOS: <span data-update-id="game-score" data-update-key="red_sox">0</li>