jQuery .replaceWith() replaces each element with the provided new content
Syntax and Description
.replaceWith(newContent)
replaces each element with the provided new content.
newContent is the content to insert.
This might be an HTML string, a DOM element,
or a jQuery object.
Its return values is the jQuery object, for chaining purposes.
For the following HTML elements
<div class="container">
<div class="first">Hello</div>
<div class="second">And</div>
<div class="third">InnerText</div>
</div>//from w ww .ja va2 s .co m
apply the following
$('.second').replaceWith('<h2>New heading</h2>');
This results is:
<div class="container">
<div class="first">Hello</div>
<h2>New heading</h2>/*from w w w .ja v a 2 s . c o m*/
<div class="third">InnerText</div>
</div>
Apply the following
$('.inner').replaceWith('<h2>New heading</h2>');
The result is
<div class="container">
<h2>New heading</h2>//from w w w. j a v a2s . c o m
<h2>New heading</h2>
<h2>New heading</h2>
</div>
Applying the following
$('.third').replaceWith($('.first'));
This results:
<div class="container">
<div class="second">And</div>
<div class="first">Hello</div>
</div>
Change the tag with replaceWith
The following code changes the tag name by keeping the text.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- ww w.j a v a 2s. c om-->
$("p").replaceWith("<div>" + $(this).text() + "</div>");
});
</script>
<style>
div { border:2px green solid;}
</style>
</head>
<body>
<body>
<p>Hello java2s.com</p>
</body>
</html>
Replace with hard coded tag
The following code replaces existing tag with a hard coded tag.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from www .j a va 2 s . c o m-->
$("p").replaceWith("<b>Paragraph. </b>");
});
</script>
<style>
div { border:2px green solid;}
</style>
</head>
<body>
<body>
<p>Hello java2s.com</p>
</body>
</html>
Replace in click event
The following code replaces all matched elements with the specified DOM elements in the button click event.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from ww w . j a va 2 s. c o m-->
$("button").click(function () {
$(this).replaceWith("<div>" + $(this).text() + "</div>");
});
});
</script>
</head>
<body>
<body>
<button>First java2s.com</button>
</body>
</html>
Change button text
The following code uses the replaceWith
method to change the button text.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type='text/javascript'>
$(document).ready(<!--from www . ja va 2 s . c o m-->
function() {
$('input#id1').click(
function($e) {
$e.preventDefault();
$(this).replaceWith(
"<p>replaced</p>"
);
}
);
$('input#id2').click(
function($e) {
$e.preventDefault();
$(this).replaceWith(
"<p>replaced</p>"
);
}
);
}
);
</script>
</head>
<body>
<div>
<input type='submit' id='id1' value='View Quote' />
</div>
<div>
<input type='submit' id='id2' value='View Quote' />
</div>
</body>
</html>