{"id":3099,"date":"2013-03-14T23:00:41","date_gmt":"2013-03-14T23:00:41","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=3099"},"modified":"2013-03-14T23:00:41","modified_gmt":"2013-03-14T23:00:41","slug":"jquery-replaceall-examplesdemos","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-replaceall-examplesdemos\/","title":{"rendered":"jQuery replaceAll Method Examples"},"content":{"rendered":"<p>Want to find out how to replace\u00a0each target element with the set of matched elements.? Then the .replaceWith() method in jQuery can be used to achieve this. In this\u00a0article, \u00a0I am going to share easy examples that will show how to use the <em><strong>jQuery replaceAll method<\/strong><\/em>.<\/p>\n<p><!--more--><\/p>\n<h2>How to use the jQuery replaceAll 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=3099\" 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\">$(source).replaceAll(target);<\/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: Replace Specific List Item With a New List Item Using its Class\">\t$('#sbt_replace_list_text_specific').on(\"click\", function(e){\t\t\t\t\n\n\t\t$('&lt;li&gt;SPECIFIC List Item Replacement&lt;\/li&gt;').replaceAll('#my_list li.list_item');\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: Replace All List Items With a Totally New set of List Items\">\t$('#sbt_replace_list_text').on(\"click\", function(e){\t\t\t\t\n\n\t\t$('&lt;li&gt;NEW List Item&lt;\/li&gt;').replaceAll('#my_list li');\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: Replace Heading with Div Using its ID\">\t$('#sbt_replace_heading_with_div').on(\"click\", function(e){\t\t\t\t\n\n\t\t$('&lt;div class=\"custom_class\"&gt;This is a DIV&lt;\/div&gt;').replaceAll('#my_heading');\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: Replace Div With Heading Using its Class\">\t$('#sbt_replace_div_with_heading').on(\"click\", function(e){\t\t\t\t\n\n\t\t$('&lt;h1 id=\"my_heading\"&gt;This is MY NEW HEADING&lt;\/h1&gt;').replaceAll('.custom_class');\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=3099\" 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 replaceAll method<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Want to find out how to replace\u00a0each target element with the set of matched elements.? Then the .replaceWith() method in jQuery can be used to achieve this. In this\u00a0article, \u00a0I am going to share easy examples that will show how to use the jQuery replaceAll 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-3099","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-NZ","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3099","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=3099"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3099\/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=3099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=3099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=3099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}