{"id":28057,"date":"2021-01-05T18:11:21","date_gmt":"2021-01-06T02:11:21","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=28057"},"modified":"2021-01-12T02:59:32","modified_gmt":"2021-01-12T10:59:32","slug":"jquery-html","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/jquery-html\/","title":{"rendered":"How to Use the jQuery html() Method"},"content":{"rendered":"\n<p>jQuery has many methods available to help developers efficiently create a dynamic web experience. The jQuery <code>html()<\/code> method replaces all HTML inside of the selected element. This is useful if you want to dynamically change what the user is seeing after interacting with the page.<br><\/p>\n\n\n\n<p>In this guide we will learn about how to use <code>html()<\/code> and its syntax. We will also take a look at a step-by-step approach to use <code>html()<\/code>. jQuery <code>html()<\/code> is a fundamental method in the jQuery library and is often used. After learning the basics, you will be ready to start practicing using <code>html()<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is jQuery html()?<\/h2>\n\n\n\n<p>jQuery <code>html()<\/code> sets the HTML contents of each element in a set of matched elements. Caution should be taken to provide a specific enough query to replace only the HTML desired.<br><\/p>\n\n\n\n<p>Only the content is changed with <code>html()<\/code>. If there is a stylesheet, the new content will be styled the same as the previous content. It is also worth mentioning that <code>html()<\/code> only works on an HTML document \u2014 it does not work with XML.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">html() jQuery Syntax<\/h2>\n\n\n\n<p>Recall that jQuery methods are called on a selector first. The selector may be as broad as a &lt;p&gt; tag or as specific as a &lt;div&gt; with an id (&lt;div id=\u2018main-app\u2019&gt;&lt;\/div&gt;). Once the desired element is selected, we can call <code>html()<\/code> and pass in an HTML string as a parameter to <code>html()<\/code>. For a thorough explanation of CSS selectors, refer to our <a href=\"https:\/\/careerkarma.com\/blog\/css-selectors\/\">guide<\/a>.&nbsp;<br><\/p>\n\n\n\n<p><code>html()<\/code> accepts either a string literal as a parameter or a variable containing the string. Passing a string literal of \u201cNew Content\u201d will render the same as passing a variable referencing \u201cNew Content.\u201d&nbsp;<br><\/p>\n\n\n\n<p>Say we have this simple &lt;div&gt;:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;div class='main-content&gt;\n  &lt;p class='paragraphOne'&gt; Hello World &lt;\/p&gt;\n&lt;\/div&gt;<\/pre><\/div>\n\n\n\n<p>We can replace the entire &lt;p&gt; tag:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>$('div.main-content').html('&lt;p&gt;New Content&lt;\/p&gt;')<\/pre><\/div>\n\n\n\n<p>The above code renders the new HTML as:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;div class='main-content&gt;\n  &lt;p&gt;New Content &lt;\/p&gt;\n&lt;\/div&gt;<\/pre><\/div>\n\n\n\n<p>Had there been styling associated with the original &lt;p&gt; tag, it would no longer be active with the new content. It is possible to pass a simple string as well:&nbsp;<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>$('div.main-content').html('New Content')<\/pre><\/div>\n\n\n\n<p>Our HTML is now as follows:&nbsp;<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;div class='main-content&gt;\n  New Content \n&lt;\/div&gt;<\/pre><\/div>\n\n\n\n<p>We can see that there are some differences in the new content. Passing a string literal is a great way to maintain the styling of previous content. Remember, a string literal is simply a string with containing characters. If the new content needs to be a child element, using an HTML string accomplishes this.<br><\/p>\n\n\n\n<p>Now that the basic syntax has been covered, let\u2019s take a look at an example.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">html() jQuery Example<\/h2>\n\n\n\n<p>We saw how <code>html()<\/code> replaces the content inside the selected element in our above \u201cNew Content\u201d example. This can be accomplished by passing a string literal or an HTML string as a parameter. Let\u2019s look at an example where we maintain the original styling.&nbsp;<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;head&gt;\n&lt;style&gt;\n.blue {\n color: blue;\n}\n\n&lt;\/style&gt;\n&lt;script src=&quot;https:\/\/code.jquery.com\/jquery-3.5.0.js&quot;&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;h2&gt;\nhtml() Demo:\n&lt;\/h2&gt;\n&lt;div class='main'&gt;\n &lt;p class='blue'&gt;\n Hello\n &lt;\/p&gt;\n &lt;p&gt;\n World\n &lt;\/p&gt;\n &lt;p&gt;\n Goodbye\n &lt;\/p&gt;\n &lt;\/div&gt;\n &lt;script&gt;\n \n &lt;\/script&gt;\n&lt;\/body&gt;<\/pre><\/div>\n\n\n\n<p>Looking at our beginning HTML page, we will see only the word \u201cHello\u201d is styled with the color blue.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/7l1v5IpMHnr77L7VJ40PxlNLkk-zd8BP_37PBrngbwjGOZirVNose4KYngF1pr6if2FAxb_qrINRkQueEDCfyjg2JxBzoEo5mhWX4iOt8LjtJMce1DSnsBbMK2iJVEaQ9fbEcH6e\" alt=\"\"\/><\/figure>\n\n\n\n<p>In this example, we want to replace the word \u201cHello\u201d with new content, but retain the original styling. To accomplish this, we select the paragraph with the class name blue.<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre> $('p.blue').html(&quot;Hello AGAIN&quot;)<\/pre><\/div>\n\n\n\n<p>We have selected the paragraph belonging to the class blue and replaced \u201cHello\u201d with \u201cHello AGAIN.\u201d Since <code>html()<\/code> replaces the content wrapped in the element names, the blue color will remain.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/A83aaFCGA71IBKWgL4WyaFqn_-geP4fN7kwWBtZnN4Xmhk9dfSP85teVs83FA2w8myG0SsPwzmfMP8RagLyBGr0JCb8XgEpQ88AFUpD-5iatEp_Im3xzfqRKD35rOb9xjhLoN1Na\" alt=\"\"\/><\/figure>\n\n\n\n<p>What if we wanted to replace all of the paragraph text? If we select the &lt;p&gt; element, it will replace the above text with three instances of \u201cHello AGAIN.\u201d<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre> $('p').html(&quot;Hello AGAIN&quot;)<\/pre><\/div>\n\n\n\n<p>Here we are selecting all paragraph tags in the HTML file and replacing the content of each one with \u201cHello AGAIN\u201d. Like our first example, the original styling will render because we are replacing content wrapped in those tags.<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/2guefy2uVdRQb3zbHpmF0SeFtMBttoqGZfEwZJn0nS04IulS0SYHM8Q_Ddxef0zLi8sxC1Lt4N3-HIOZpbIRtU1eFIP0y8qbPJcTc1kvB4Pc5Ti1CUpWDSZktp3v6zyCo7fIavTM\" alt=\"\"\/><\/figure>\n\n\n\n<p>Just as we expected. Let\u2019s go up one level in our selector to our &lt;div&gt; belonging to the \u2018main\u2019 class. This is where passing HTML strings as parameters comes in handy. <br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre> $('div.main').html('&lt;p class=blue&gt;Main Div Content&lt;\/p&gt;')<\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/jXF9suUYnrtQvrU_8sIs3-nEA0BBS2hKkyRaigcZX26RHBcDZ376i87EpwGAsBEBYNaIjVUs-FAsrMupPlC9CduIwFUCCBGj_XgT_ol64YUdUPWEKZYgZYc3IZ7gn0BmQI6w6DXx\" alt=\"\"\/><\/figure>\n\n\n\n<p>Inside our main div, we have three paragraph elements. Knowing how <code>html()<\/code> works, we can deduce the above code will replace the three &lt;p&gt; tags with the one passed as a parameter. Read our <a href=\"https:\/\/careerkarma.com\/blog\/html-courses\/\">guide<\/a> on learning HTML to go deeper with the above concept<\/p>\n\n\n\n<p>In one line of code, we replaced three different paragraph elements and used our original class styling.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>jQuery <code>html()<\/code> is a commonly used method for replacing content on HTML pages to create a dynamic experience. Because <code>html()<\/code> replaces the content that is wrapped inside HTML elements, it is important to pay attention to the jQuery selectors and any style classes. This will prevent any unwanted style changes.&nbsp;<br><\/p>\n\n\n\n<p>We have learned what jQuery is, its syntax, and an example of how it can be used. Spend some time practicing and getting to now this widely used method.<\/p>\n","protected":false},"excerpt":{"rendered":"jQuery has many methods available to help developers efficiently create a dynamic web experience. The jQuery html() method replaces all HTML inside of the selected element. This is useful if you want to dynamically change what the user is seeing after interacting with the page. In this guide we will learn about how to use&hellip;","protected":false},"author":104,"featured_media":11907,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[],"class_list":{"0":"post-28057","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Use the jQuery html() Method | Career Karma<\/title>\n<meta name=\"description\" content=\"The jQuery html() method replaces selected content with new content. Learn how to start using html() in this guide.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/jquery-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use the jQuery html() Method\" \/>\n<meta property=\"og:description\" content=\"The jQuery html() method replaces selected content with new content. Learn how to start using html() in this guide.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/jquery-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-06T02:11:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-12T10:59:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/JavaScript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"667\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ryan Manchester\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ryan Manchester\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-html\\\/\"},\"author\":{\"name\":\"Ryan Manchester\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/92fd52a503f77fc058ec2d0666da9bd5\"},\"headline\":\"How to Use the jQuery html() Method\",\"datePublished\":\"2021-01-06T02:11:21+00:00\",\"dateModified\":\"2021-01-12T10:59:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-html\\\/\"},\"wordCount\":794,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/02\\\/JavaScript.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-html\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-html\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-html\\\/\",\"name\":\"How to Use the jQuery html() Method | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-html\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/02\\\/JavaScript.jpg\",\"datePublished\":\"2021-01-06T02:11:21+00:00\",\"dateModified\":\"2021-01-12T10:59:32+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/92fd52a503f77fc058ec2d0666da9bd5\"},\"description\":\"The jQuery html() method replaces selected content with new content. Learn how to start using html() in this guide.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-html\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-html\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-html\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/02\\\/JavaScript.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/02\\\/JavaScript.jpg\",\"width\":1000,\"height\":667},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Use the jQuery html() Method\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/92fd52a503f77fc058ec2d0666da9bd5\",\"name\":\"Ryan Manchester\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/ryan-manchester-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/ryan-manchester-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/ryan-manchester-150x150.jpg\",\"caption\":\"Ryan Manchester\"},\"description\":\"Ryan is a technical writer at Career Karma, where he covers programming languages, technology, and web development. The Texas native earned his Bachelor's of Music Composition from the University of North Texas. Ryan is currently pursuing further education in web development, aiming to graduate from Flatiron School with a certification in full stack web development. Since joining the Career Karma team in November 2020, Ryan has used his expertise to cover topics like React and Ruby on Rails.\",\"sameAs\":[\"http:\\\/\\\/www.ryanmanchester.info\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/ryan-manchester-6537a630\\\/\"],\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/ryan-manchester\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Use the jQuery html() Method | Career Karma","description":"The jQuery html() method replaces selected content with new content. Learn how to start using html() in this guide.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/jquery-html\/","og_locale":"en_US","og_type":"article","og_title":"How to Use the jQuery html() Method","og_description":"The jQuery html() method replaces selected content with new content. Learn how to start using html() in this guide.","og_url":"https:\/\/careerkarma.com\/blog\/jquery-html\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2021-01-06T02:11:21+00:00","article_modified_time":"2021-01-12T10:59:32+00:00","og_image":[{"width":1000,"height":667,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/JavaScript.jpg","type":"image\/jpeg"}],"author":"Ryan Manchester","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Ryan Manchester","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/jquery-html\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/jquery-html\/"},"author":{"name":"Ryan Manchester","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/92fd52a503f77fc058ec2d0666da9bd5"},"headline":"How to Use the jQuery html() Method","datePublished":"2021-01-06T02:11:21+00:00","dateModified":"2021-01-12T10:59:32+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/jquery-html\/"},"wordCount":794,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/jquery-html\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/JavaScript.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/jquery-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/jquery-html\/","url":"https:\/\/careerkarma.com\/blog\/jquery-html\/","name":"How to Use the jQuery html() Method | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/jquery-html\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/jquery-html\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/JavaScript.jpg","datePublished":"2021-01-06T02:11:21+00:00","dateModified":"2021-01-12T10:59:32+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/92fd52a503f77fc058ec2d0666da9bd5"},"description":"The jQuery html() method replaces selected content with new content. Learn how to start using html() in this guide.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/jquery-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/jquery-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/jquery-html\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/JavaScript.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/JavaScript.jpg","width":1000,"height":667},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/jquery-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/careerkarma.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"How to Use the jQuery html() Method"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/92fd52a503f77fc058ec2d0666da9bd5","name":"Ryan Manchester","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/12\/ryan-manchester-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/12\/ryan-manchester-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/12\/ryan-manchester-150x150.jpg","caption":"Ryan Manchester"},"description":"Ryan is a technical writer at Career Karma, where he covers programming languages, technology, and web development. The Texas native earned his Bachelor's of Music Composition from the University of North Texas. Ryan is currently pursuing further education in web development, aiming to graduate from Flatiron School with a certification in full stack web development. Since joining the Career Karma team in November 2020, Ryan has used his expertise to cover topics like React and Ruby on Rails.","sameAs":["http:\/\/www.ryanmanchester.info\/","https:\/\/www.linkedin.com\/in\/ryan-manchester-6537a630\/"],"url":"https:\/\/careerkarma.com\/blog\/author\/ryan-manchester\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/28057","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/104"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=28057"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/28057\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/11907"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=28057"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=28057"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=28057"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}