{"id":2739,"date":"2013-03-09T14:42:05","date_gmt":"2013-03-09T14:42:05","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=2739"},"modified":"2013-03-09T14:42:05","modified_gmt":"2013-03-09T14:42:05","slug":"easy-jquery-html-examples","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/easy-jquery-html-examples\/","title":{"rendered":"jQuery html Examples"},"content":{"rendered":"<p>Do you want to find out more about what the <em><strong>jQuery html<\/strong><\/em> is used for and how you can use it in your own web pages? .html() is a method in jQuery. So in this article, I am going to share very easy ways on how to use the html method by means of easy examples. So follow along for more info.<\/p>\n<p><!--more--><\/p>\n<h2>Time to look at easy jQuery html Examples<\/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=2739\" 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>In order to find out how to use\u00a0.html() method in jQuery, let&#8217;s first understand what the .html() method does. Basically the\u00a0.html() method works differently based upon what you are trying to do. That said, here are the two\u00a0possibilities.<\/p>\n<p><strong>1. Get content of the desired element &#8211;<\/strong> The html() method will basically\u00a0get the html contents of the first element of the matched elements.<\/p>\n<p><strong>2. Write to the content of the desired\u00a0element &#8211;<\/strong>\u00a0The html() method will basically\u00a0write to the html contents of all matched elements.<\/p>\n<p>Enough talking, now let&#8217;s look at some real examples.<\/p>\n<h3>Common HTML source for all examples for all the following examples:<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Common HTML source for all examples\">&lt;style type=\"text\/css\"&gt;\n#my_div1 {\n\tbackground-color: #E1F3FF;\n\tborder: 1px solid #09F;\n\tpadding: 10px;\n\tmargin-bottom: 10px;\n}\n#my_span1 {\n\tbackground-color: #D7FFD7;\n\tborder: 1px solid #090;\n\tpadding: 10px;\n\tmargin-bottom: 10px;\t\n}\n.common_class {\n\tcolor:#F60;\n\tfont-size: 30px;\n\tfont-family: Georgia, \"Times New Roman\", Times, serif;\n\tfont-style: italic;\n}\n&lt;\/style&gt;\n\n&lt;div class=\"divs_container\"&gt;\n\n&lt;div id=\"my_div1\" class=\"common_class\"&gt;This is MY DIV 1&lt;\/div&gt;\n\n&lt;span id=\"my_span1\" class=\"common_class\"&gt;This is MY SPAN 1&lt;\/span&gt;\n\n&lt;\/div&gt;\n\n&lt;p&gt;\t\n&lt;input type=\"submit\" name=\"sbt_get_div_content\" id=\"sbt_get_div_content\" value=\"Get DIV HTML using DIV ID\"&gt;\n&lt;input type=\"submit\" name=\"sbt_get_span_content\" id=\"sbt_get_span_content\" value=\"Get SPAN HTML using SPAN ID\"&gt; \n&lt;input type=\"submit\" name=\"sbt_get_content_using_class\" id=\"sbt_get_content_using_class\" value=\"Get HTML Content using Class\"&gt;\n&lt;\/p&gt;\n\n&lt;p&gt;\n&lt;input type=\"submit\" name=\"sbt_replace_div_content\" id=\"sbt_replace_div_content\" value=\"Replace DIV HTML using DIV ID\"&gt;\n&lt;input type=\"submit\" name=\"sbt_replace_span_content\" id=\"sbt_replace_span_content\" value=\"Replace SPAN HTML using SPAN ID\"&gt; \n&lt;input type=\"submit\" name=\"sbt_replace_content_using_class\" id=\"sbt_replace_content_using_class\" value=\"Replace HTML Content using Class\"&gt;\n\n&lt;\/p&gt;\n\n&lt;input type=\"button\" name=\"sbt_reset\" id=\"sbt_reset\" value=\"Reset everything\"&gt;<\/pre>\n<h3>\u00a0Here is the common jQuery code for all examples:<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Common jQuery code for all examples:\">&lt;script type=\"text\/javascript\" language=\"javascript\" &gt;\n\n$(document).ready(function(){\n\n\t\/\/Put all the example codes here when you try it our yourself\t\n\n});\t\n\n&lt;\/script&gt;<\/pre>\n<h3>Example 1:\u00a0Get the html content of the div using div ID<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 1: Get the html content of the div using div ID\">\t\/\/Gets the html content of the div\n\t$('#sbt_get_div_content').on(\"click\", function(e){\t\t\n\n\t\talert( $(\"#my_div1\").html() );\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 2:\u00a0Get the html content of the span using span ID<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 2: Get the html content of the span using span ID\">\t\/\/Gets the html content of the span\n\t$('#sbt_get_span_content').on(\"click\", function(e){\t\t\n\n\t\talert( $(\"#my_span1\").html() );\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 3:\u00a0Get the html content using the common class<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 3: Get the html content using the common class\">\t\/\/Gets the html content using the class name\n\t$('#sbt_get_content_using_class').on(\"click\", function(e){\t\t\n\n\t\talert( $(\".common_class\").html() );\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 4:\u00a0Write to the html content of the div using div ID<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 4: Write to the html content of the div using div ID\">\t\/\/Overwrite the html content of the div\n\t$('#sbt_replace_div_content').on(\"click\", function(e){\t\t\n\n\t\t$(\"#my_div1\").html('New DIV data');\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 5:\u00a0Write to the html content of the span using span ID<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 5: Write to the html content of the span using span ID\">\t\/\/Overwrite the html content of the span\t\n\t$('#sbt_replace_span_content').on(\"click\", function(e){\t\t\n\n\t\t$(\"#my_span1\").html('New SPAN data');\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 6: Write to the html content of all matched elements using class name<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 6: Write to the html content of all matched elements using class name\">\t\/\/Overwrite the html content using class name\n\t$('#sbt_replace_content_using_class').on(\"click\", function(e){\t\t\n\n\t\t$(\".common_class\").html('Totally new data always appears in all matched elements when using a common attribute such as the class name.');\n\n\t\te.preventDefault();\n\n\t});<\/pre>\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=2739\" 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<h4>That&#8217;it! Your Turn Now!<\/h4>\n<p>Do you know of any other\u00a0examples of<strong><\/strong><em><strong>\u00a0jQuery\u00a0html method<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you want to find out more about what the jQuery html is used for and how you can use it in your own web pages? .html() is a method in jQuery. So in this article, I am going to share very easy ways on how to use the html method by means of easy [&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-2739","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-Ib","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/2739","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=2739"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/2739\/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=2739"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=2739"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=2739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}