.replaceWith( newContent ) .replaceWith( function )
<html> <head> <title>ThaiCreate.Com jQuery Tutorials</title> <style> button { display:block; margin:3px; color:red; width:200px; } div { color:red; border:2px solid blue; width:200px; margin:3px; text-align:center; } </style> <script type="text/javascript" src="jquery-1.6.4.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function () { $(this).replaceWith( "<div>" + $(this).text() + "</div>" ); }); }); </script> </head> <body> <button>First</button> <button>Second</button> <button>Third</button> </body> </html>
<html> <head> <title>ThaiCreate.Com jQuery Tutorials</title> <script type="text/javascript" src="jquery-1.6.4.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").replaceWith( "<b>Paragraph. </b>" ); }); </script> </head> <body> <p>Hello</p> <p>cruel</p> <p>World</p> </body> </html>
<html> <head> <title>ThaiCreate.Com jQuery Tutorials</title> <style> div { border:2px solid blue; color:red; margin:3px; } p { border:2px solid red; color:blue; margin:3px; cursor:pointer; } </style> <script type="text/javascript" src="jquery-1.6.4.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function () { $(this).replaceWith( $("div") ); }); }); </script> </head> <body> <p>Hello</p> <p>cruel</p> <p>World</p> <div>Replaced!</div> </body> </html>
<html> <head> <title>ThaiCreate.Com jQuery Tutorials</title> <style> .container { background-color: #991; } .inner { color: #911; } </style> <script type="text/javascript" src="jquery-1.6.4.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('button').bind("click", function() { var $container = $("div.container").replaceWith(function() { return $(this).contents(); }); $("p").append( $container.attr("class") ); }); }); </script> </head> <body> <p> <button>Replace!</button> </p> <div class="container"> <div class="inner">Scooby</div> <div class="inner">Dooby</div> <div class="inner">Doo</div> </div> </body> </html>
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน 
Load balance : Server 05
