{"id":3247,"date":"2013-03-24T19:30:52","date_gmt":"2013-03-24T19:30:52","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=3247"},"modified":"2013-03-24T19:30:52","modified_gmt":"2013-03-24T19:30:52","slug":"jquery-prependto-method-examples","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-prependto-method-examples\/","title":{"rendered":"jQuery .prependTo() Method Examples"},"content":{"rendered":"<p><em><strong>jQuery prependTo method<\/strong> <\/em>is a very easy to use, if you want to insert content, text or html or both, into another element, before the content of the target element. By using it, you can easily add content, dynamic or static. In this article, I am going to share easy examples on using the prependTo() method in jQuery.<\/p>\n<p><!--more--><\/p>\n<h2>How to use jQuery prependTo 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=3247\" 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>For the sake of the example, let us assume that we have two main divs with class &#8220;red&#8221; &amp; &#8220;green&#8221; applied to them. Both these divs are held in another &#8220;container&#8221; div for easy manipulation. Apart from those two divs, we are also going have two individual buttons that will let you prependTo the red div to green div and vice-versa. We also have another button that will reset the divs back to their original state, once the prependTo method has been used on them dynamically.<\/p>\n<h3>Example: Using the .prependTo() method in jQuery to prepend content to the content of the target element (div)<\/h3>\n<div>\n<pre class=\"lang:xhtml decode:true\" title=\"Example\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;Examples of using the .prependTo() method&lt;\/title&gt;\n&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.red {\nbackground-color: #FFA6A6;\nborder: 1px solid red;\nmargin: 10px;\n}\n.green {\nbackground-color: #CEFFCE;\nborder: 1px solid green;\nmargin: 10px;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;div&gt;\n\n&lt;div id=\"mydiv1\"&gt;This is my 1 div&lt;\/div&gt;\n\n&lt;div id=\"mydiv2\"&gt;This is my 2 div&lt;\/div&gt;\n\n&lt;\/div&gt;\n\n&lt;input type=\"button\" name=\"sbt_prepend_g2r\" id=\"sbt_prepend_g2r\" value=\"Prepend Green Div to Red\"&gt;\n&lt;input type=\"submit\" name=\"sbt_remove\" id=\"sbt_remove\" value=\"Undo\"&gt;\n&lt;input type=\"button\" name=\"sbt_prepend_r2g\" id=\"sbt_prepend_r2g\" value=\"Prepend Red Div to Green\"&gt;\n\n&lt;script type=\"text\/javascript\" language=\"javascript\" &gt;\n\n$(document).ready(function(){\n\nvar divs_container_html = $(\".divs_container\").html();\n\n\/\/Prepend Green Div to Red\n$('#sbt_prepend_g2r').on(\"click\", function(){\n\n$('.green').prependTo($('.red'));\n\n});\n\n\/\/Prepend Red Div to Green\n$('#sbt_prepend_r2g').on(\"click\", function(){\n\n$('.red').prependTo($('.green'));\n\n});\n\n\/\/Reset the divs back to their original state\n$('#sbt_remove').on(\"click\", function(){\n\n$(\".divs_container\").html(divs_container_html);\n\n});\n\n});\n\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<\/div>\n<div><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=3247\" 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    <\/div>\n<h3>Difference between jquery .prepend() and jquery .prependTo() methods<\/h3>\n<p>In jQuery, the .prepend() and .prependTo() methods have the same\u00a0functionality\u00a0 However, the main difference lies in the syntax. To be more precise, the syntax varies, in the placement of the content and target. Here&#8217;s an easy\u00a0representation\u00a0for your understanding:<\/p>\n<h4>Using the .prepend() method<\/h4>\n<div>\n<pre class=\"lang:xhtml decode:true\">$(target).prepend(new_content);<\/pre>\n<\/div>\n<h4>Using the .prependTo() method<\/h4>\n<pre class=\"lang:xhtml decode:true crayon-selected\">$(new_content).prependTo(target);<\/pre>\n<p>Where the new_content can be a div, an image, HTML content, etc. If you would like a technical explanation of the above, here it is:<\/p>\n<p>When .prepend() is used, the container into which the content is inserted appears <strong>before<\/strong> the method.<\/p>\n<p>When .prependTo() is used, the container into which the content is inserted appears <strong>after<\/strong> the method.<\/p>\n<h5>That&#8217;s it for now!<\/h5>\n<p>Do you know of any other ways to use the <em><strong>jquery\u00a0<\/strong><strong>.prependTo() method<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>jQuery prependTo method is a very easy to use, if you want to insert content, text or html or both, into another element, before the content of the target element. By using it, you can easily add content, dynamic or static. In this article, I am going to share easy examples on using the prependTo() [&hellip;]<\/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-3247","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-Qn","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3247","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=3247"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3247\/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=3247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=3247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=3247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}