JavaScript DHTML/jQuery/replaceWith
Содержание
Replace a button with text
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.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 with
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.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>
Replace text with
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.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 type="text/javascript" src="js/jquery-1.3.2.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>
replaceWith(content): Replaces all matched elements with the specified HTML or DOM elements.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.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>