update(element[, newContent]) -> HTMLElement

Replaces the content of element with the provided newContent argument and returns element.

newContent can be plain text, an HTML snippet, or any JavaScript object which has a toString() method.

If it contains any <script> tags, these will be evaluated after element has been updated (Element.update internally calls String#evalScripts).

If no argument is provided, Element.update will simply clear element of its content.

Note that this method allows seamless content update of table related elements in Internet Explorer 6 and beyond.

Examples

<div id="fruits">carrot, eggplant and cucumber</div>

Passing a regular string:

$('fruits').update('kiwi, banana and apple');
// -> HTMLElement
$('fruits').innerHTML
// -> 'kiwi, banana and apple'

Clearing the element’s content:

$('fruits').update();
// -> HTMLElement
$('fruits').innerHTML;
// -> '' (an empty string)

And now inserting an HTML snippet:

$('fruits').update('<p>Kiwi, banana <em>and</em> apple.</p>');
// -> HTMLElement
$('fruits').innerHTML;
// -> '<p>Kiwi, banana <em>and</em> apple.</p>'

… with a <script> tag thrown in:

$('fruits').update('<p>Kiwi, banana <em>and</em> apple.</p><script>alert("updated!")</script>');
// -> HTMLElement (and prints "updated!" in an alert dialog).
$('fruits').innerHTML;
// -> '<p>Kiwi, banana <em>and</em> apple.</p>'

Relying on the toString() method:

$('fruits').update(123);
// -> HTMLElement
$('fruits').innerHTML;
// -> '123'

Finally, you can do some pretty funky stuff by defining your own toString() method on your custom objects:

var Fruit = Class.create();
Fruit.prototype = {
  initialize: function(fruit){
    this.fruit = fruit;
  },
  toString: function(){
    return 'I am a fruit and my name is "' + this.fruit + '".'; 
  }
}
var apple = new Fruit('apple');

$('fruits').update(apple);
$('fruits').innerHTML;
// -> 'I am a fruit and my name is "apple".'