replace
replace(element[, html]) -> HTMLElement
Replaces element
by the content of the html
argument and returns the removed element
.
Using replace
as an instance method (e.g., $('foo').replace('<p>Bar</p>')
) causes errors in Opera 9 when used on input
elements. The replace
property is reserved on input
s as part of Web Forms 2. As a workaround, use the generic version instead (Element.replace('foo', '<p>Bar</p>')
).
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 (Element.replace()
internally calls String#evalScripts).
Note that if no argument is provided, Element.replace
will simply clear element
of its content. However, using Element.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').replace(123);
// -> HTMLElement
$('food').innerHTML;
// -> '123'