{"id":3093,"date":"2013-03-14T22:37:42","date_gmt":"2013-03-14T22:37:42","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=3093"},"modified":"2013-03-14T22:37:42","modified_gmt":"2013-03-14T22:37:42","slug":"jquery-replacewith-examplesdemos","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-replacewith-examplesdemos\/","title":{"rendered":"jQuery replaceWith Examples"},"content":{"rendered":"<p>Want to find out how to\u00a0replace each element in the set of matched elements with the provided new content and return the set of elements that was removed? Then use the .replaceWith() method in jQuery. In this\u00a0article\u00a0 I am going to share easy examples that will show how to use the \u00a0<em><strong>jQuery replaceWith method<\/strong><\/em>.<\/p>\n<p><!--more--><\/p>\n<h2>How to use jQuery replaceWith method<\/h2>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=3093\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p>Let&#8217;s consider the following example. Let&#8217;s assume that we have couple of different elements in a web page such as list item and a heading. We will replace some\/all of these items depending upon our requirement. So let&#8217;s see how to do this.<\/p>\n<p><strong>Here is the common HTML source code for all the following examples:<\/strong><\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"Common HTML source code for all the following examples:\">&lt;script type=\"text\/javascript\" src=\"js\/jquery-1.8.2.min.js\"&gt;&lt;\/script&gt;\n&lt;style type=\"text\/css\"&gt;\n#my_div1  {\n\tbackground-color: #3C6;\n\tborder: 1px solid #090;\n}\n\n.custom_class {\n\tbackground-color: #FC9;\n\tborder: 1px solid #F90;\n}\t\n&lt;\/style&gt;\n\n&lt;div class=\"divs_container\"&gt;\n\n    &lt;ul id=\"my_list\"&gt;\n    &lt;li class=\"list_item\"&gt;Old List Item&lt;\/li&gt;\n    &lt;li&gt;Old List Item&lt;\/li&gt;    \n    &lt;\/ul&gt;\n\n\t&lt;h1 id=\"my_heading\"&gt;This is a heading&lt;\/h1&gt;\n\n&lt;\/div&gt;    \n\n&lt;p&gt;\n&lt;input type=\"submit\" name=\"sbt_replace_list_text_specific\" id=\"sbt_replace_list_text_specific\" value=\"Replace Specific List Item Using its Class\"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_replace_list_text\" id=\"sbt_replace_list_text\" value=\"Replace All List Items\"&gt;\n&lt;\/p&gt;\n\n&lt;p&gt;    \n&lt;input type=\"submit\" name=\"sbt_replace_heading_with_div\" id=\"sbt_replace_heading_with_div\" value=\"Replace Heading with Div\"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_replace_div_with_heading\" id=\"sbt_replace_div_with_heading\" value=\"Replace Div with  Heading\"&gt;\n\n&lt;\/p&gt;<\/pre>\n<h3>This is the basic format of using .replaceWith() method:<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Syntax format\">$(target).replaceWith(source);<\/pre>\n<h3>Example 1: Replace\u00a0Specific List Item With a New List Item Using its Class<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 1:\">\t$('#sbt_replace_list_text_specific').on(\"click\", function(e){\t\t\t\t\n\n\t\t$('#my_list li.list_item').replaceWith('&lt;li&gt;SPECIFIC List Item Replacement&lt;\/li&gt;');\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<p>In the above example when the button is clicked, the list item that has a class of &#8216;list_item&#8217;, will be the only one to be completely replaced with a new list item.<\/p>\n<h3>Example 2: Replace\u00a0All List Items With a Totally New set of List Items<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 2\">\t$('#sbt_replace_list_text').on(\"click\", function(e){\t\t\t\t\n\n\t\t$('#my_list li').replaceWith('&lt;li&gt;NEW List Item&lt;\/li&gt;');\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<p>In the above example when the button is clicked, all the existing list items, will be completely replaced with new list items.<\/p>\n<h3>Example 3: Replace\u00a0Heading with Div Using its ID<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 3\">\t$('#sbt_replace_heading_with_div').on(\"click\", function(e){\t\t\t\t\n\n\t\t$('#my_heading').replaceWith('&lt;div class=\"custom_class\"&gt;This is a DIV&lt;\/div&gt;');\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<p>In the above example when the button is clicked, the Heading will be replaced with a div. The ID of the heading is used to target it. If you want to, you can even target the heading by just using it&#8217;s standard tag, without using any ID or class.<\/p>\n<h3>Example 4: Replace\u00a0Div With Heading Using its Class<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 4\">\t$('#sbt_replace_div_with_heading').on(\"click\", function(e){\t\t\t\t\n\n\t\t$('.custom_class').replaceWith('&lt;h1 id=\"my_heading\"&gt;This is MY NEW HEADING&lt;\/h1&gt;');\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<p>In the above example when the button is clicked, the Div that just replaced the Heading in the above example, will be replaced with the heading (h1 tag).<\/p>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=3093\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<h5>Simple, isn&#8217;t it?<\/h5>\n<p>Do you know of any other ways to use the <em><strong>jQuery replaceWith method<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Want to find out how to\u00a0replace each element in the set of matched elements with the provided new content and return the set of elements that was removed? Then use the .replaceWith() method in jQuery. In this\u00a0article\u00a0 I am going to share easy examples that will show how to use the \u00a0jQuery replaceWith method.<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[42,43,41],"class_list":["post-3093","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-demos-2","tag-jquery-snippets","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-NT","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3093","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=3093"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3093\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=3093"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=3093"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=3093"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}