.replaceWith()
Syntax
.replaceWith(newContent)
Parameters
newContent
- The content to insert. This might be an HTML string, a DOM element, or a jQuery object.
Return value
The jQuery object, for chaining purposes.
Description
Replace each element with the provided new content.
Examples
<div class="container">
<div class="first">Hello</div>
<div class="second">And</div>
<div class="third">InnerText</div>
</div>
$('.second').replaceWith('<h2>New heading</h2>');
This results is:
<div class="container">
<div class="first">Hello</div>
<h2>New heading</h2>
<div class="third">InnerText</div>
</div>
$('.inner').replaceWith('<h2>New heading</h2>');
The result is
<div class="container">
<h2>New heading</h2>
<h2>New heading</h2>
<h2>New heading</h2>
</div>
$('.third').replaceWith($('.first'));
This results:
<div class="container">
<div class="second">And</div>
<div class="first">Hello</div>
</div>
Replace text with
<html>
<head>
<script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").replaceWith("<div>" + $(this).text() + "</div>");
});
</script>
<style>
div { border:2px green solid;}
</style>
</head>
<body>
<body>
<p>Hello</p>
</body>
</html>
Replace with another tag
<html>
<head>
<script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").replaceWith("<b>Paragraph. </b>");
});
</script>
<style>
div { border:2px green solid;}
</style>
</head>
<body>
<body>
<p>Hello</p>
</body>
</html>
Replaces all matched elements with the specified HTML or DOM elements.
<html>
<head>
<script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function () {
$(this).replaceWith("<div>" + $(this).text() + "</div>");
});
});
</script>
</head>
<body>
<body>
<button>First</button>
</body>
</html>
Replace a button with text
<html>
<head>
<script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
<script type='text/javascript'>
$(document).ready(
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>
Replace all
<html>
<head>
<script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
<script type='text/javascript'>
$(document).ready(
function() {
$('input#tmpQuote1').click(
function($e) {
$e.preventDefault();
$('p#id1').replaceAll(this);
}
);
$('input#tmpQuote2').click(
function($e) {
$e.preventDefault();
$('p#id2').replaceAll(this);
}
);
}
);
</script>
<style type='text/css'>
div {
background: #acf7d0;
border: 3px solid #96dab6;
margin: 3px;
}
div#tmp {
display: none;
}
</style>
</head>
<body>
<div id='tmp'>
<p id='id1'>
asdf
</p>
<p id='id2'>
asdf
</p>
</div>
<div>
<input type='submit' id='tmpQuote1' value='View Quote' />
</div>
<div>
<input type='submit' id='tmpQuote2' value='View Quote' />
</div>
</body>
</html>
Home
JavaScript Book
jQuery
JavaScript Book
jQuery
DOM:
- jQuery DOM
- $("html tags"):generate code with the jQuery wrapper function.
- .add()
- .addClass()
- .after()
- .andSelf()
- .append()
- .appendTo()
- .attr()
- .before()
- .children()
- .clone()
- .closest()
- .contents()
- .css()
- .detach()
- .filter()
- .first()
- .get()
- .has()
- .hasClass()
- .height()
- .html()
- .index()
- .innerHeight()
- .innerWidth()
- .insertAfter()
- .insertBefore()
- .is()
- .last()
- .map()
- .next()
- .nextAll()
- .nextUntil()
- .not()
- .offset()
- .offsetParent()
- .outerHeight()
- .outerWidth()
- .parent()
- .parents()
- .parentsUntil()
- .position()
- .prepend()
- .prependTo()
- .prev()
- .prevAll()
- .prevUntil()
- .remove()
- .removeClass()
- .removeAttr()
- .replaceAll()
- .replaceWith()
- .siblings()
- .scrollLeft()
- .scrollTop()
- .slice()
- .text()
- .toArray()
- .toggleClass()
- .unwrap()
- .val()
- .wrap()
- .wrapAll()
- .wrapInner()
- .width()