update
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".'