replace :: Element

replace(element[, html]) -> HTMLElement Replaces element by the content of the html argument and returns the removed element.

html can be either 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 replaced (replace() internally calls String.evalScripts).

Note that if no argument is provided, replace() will simply clear element of its content. However, using remove() to do so is both faster and more standard compliant.

Examples

<div id="food">

<div id="fruits">

<p id="first">Kiwi, banana <em>and</em> apple.</p>

</div>

</div>

Passing an HTML snippet:

$('first').replace('<ul id="favorite"><li>kiwi</li><li>banana</li><li>apple</li></ul>');

// -> HTMLElement (p#first)

$('fruits').innerHTML;

// -> '<ul id="favorite"><li>kiwi</li><li>banana</li><li>apple</li></ul>'

Again, with a <script> tag thrown in:

$('favorite').replace('<p id="still-first">Melon, oranges <em>and</em> grapes.</p><script>alert("removed!")</script>');

// -> HTMLElement (ul#favorite) and prints "removed!" in an alert dialog.

$('fruits').innerHTML

// -> '<p id="still-first">Melon, oranges <em>and</em> grapes.</p>'

With plain text:

$('still-first').replace('Melon, oranges and grapes.');

// -> HTMLElement (p#still-first)

$('fruits').innerHTML

// -> 'Melon, oranges and grapes.'

Finally, relying on the toString() method:

$('fruits').update(123);

// -> HTMLElement

$('food').innerHTML;

// -> '123'

Prototype API 1.5.0 - prototypejs.org