{"id":17178,"date":"2013-05-20T21:01:41","date_gmt":"2013-05-20T13:01:41","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17178"},"modified":"2025-04-04T01:33:09","modified_gmt":"2025-04-03T17:33:09","slug":"jquery-insert-element-part1","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part1\/","title":{"rendered":"How to Create and Insert New Elements with jQuery (Part 1)"},"content":{"rendered":"<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jquery.com\/\">jQuery<\/a> is an incredibly popular JavaScript library that simplifies many tasks. With jQuery, you can effortlessly manipulate HTML elements, create animations, and much more.<\/p>\n<p>In this tutorial, we\u2019ll explore how to create and insert new elements into the DOM using jQuery\u2019s Append method.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part2\/\" class=\"ref-block__link\" title=\"Read More: jQuery Guide: How to Create and Place New Elements Effectively (Part 2)\" rel=\"bookmark\"><span class=\"screen-reader-text\">jQuery Guide: How to Create and Place New Elements Effectively (Part 2)<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/jquery-insert-element-part2.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-17193 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/jquery-insert-element-part2.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">jQuery Guide: How to Create and Place New Elements Effectively (Part 2)<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tIn our previous article, we began exploring how to create and insert new elements using jQuery's Append method....\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Understanding Element Insertion<\/h2>\n<p>Appending is a technique for creating and inserting a new element into a specified parent element. The new element becomes a child of the parent, appearing right before its closing tag.<\/p>\n<p>Before diving into jQuery, let\u2019s first understand how to accomplish this task using plain JavaScript. This will help you appreciate the simplicity that jQuery offers.<\/p>\n<h2>Creating Elements in JavaScript<\/h2>\n<p>To add an element to a document in JavaScript, you first need to create it. You can use the <code>.createElement()<\/code> function for this purpose. For example, the code below creates a new <code>&lt;div&gt;<\/code> element and stores it in a variable named <code>div<\/code>.<\/p>\n<pre>\r\n var div = document.createElement('div');\r\n<\/pre>\n<p>After creating the element, you\u2019ll need to insert it into the document. To do this, you can use the <code>.appendChild()<\/code> function. The following example inserts the new <code>&lt;div&gt;<\/code> into the body of the document.<\/p>\n<pre>\r\n var div = document.createElement('div');\r\n document.body.appendChild(div);\r\n<\/pre>\n<p>If you inspect the document using Developer Tools, you\u2019ll see that the new div element has been added right before the closing body tag.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-insert-element-part1\/append-div-js.jpg\" width=\"395\" height=\"212\" alt=\"Appending div in JavaScript\"><\/figure>\n<h2>Creating Elements in jQuery<\/h2>\n<p>Now let\u2019s see how to achieve the same result using jQuery, which simplifies the process. jQuery offers a function called <code>.append()<\/code>.<\/p>\n<p>In the example below, we add a <code>&lt;div&gt;<\/code> element to the body of the document using just one line of code.<\/p>\n<pre>\r\n $('body').append('&lt;div&gt;');\r\n<\/pre>\n<p>This one-liner accomplishes the same thing as the JavaScript example but in a more straightforward manner. It\u2019s worth noting that elements generated by JavaScript or jQuery are not saved in the actual document source.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-insert-element-part1\/append-div-jquery.jpg\" width=\"475\" height=\"206\" alt=\"Appending div in jQuery\"><\/figure>\n<h2>Adding New Elements with Text<\/h2>\n<p>Let\u2019s delve deeper into this technique. This time, we\u2019ll explore how to insert a new element that includes text. As always, we\u2019ll start by demonstrating how to do this using plain JavaScript.<\/p>\n<p>Firstly, we need to create the new element and the text that will go inside it. For this example, we\u2019ll create a paragraph element.<\/p>\n<pre>\r\n var p = document.createElement('p'); \/\/ create new paragraph element\r\n<\/pre>\n<p>Next, we\u2019ll define the text content. In JavaScript, text can be created using the <code>.createTextNode()<\/code> function. Here, we store the text in a variable named <code>txt<\/code>.<\/p>\n<pre>\r\n var p = document.createElement('p'),\r\n txt = document.createTextNode('This is the text in the new element.');\r\n<\/pre>\n<p>Now, we have two separate variables: one for the new element and another for the text. To combine them, we use the <code>.appendChild()<\/code> function as shown below.<\/p>\n<pre>\r\n p.appendChild(txt);\r\n<\/pre>\n<p>Finally, we use <code>.appendChild()<\/code> again to insert the new paragraph element into the body of the document.<\/p>\n<pre>\r\n document.body.appendChild(p);\r\n<\/pre>\n<p>If you inspect the result in your browser or Developer Tools, you should see the following:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-insert-element-part1\/append-p-text-js.jpg\" width=\"500\" height=\"226\" alt=\"Appending paragraph with text in JavaScript\"><\/figure>\n<p>In jQuery, the process is even more streamlined. You can define both the text and the new element together using the <code>.append()<\/code> function, like this:<\/p>\n<pre>\r\n $('body').append('&lt;p&gt;This is the text in the new element.&lt;\/p&gt;');\r\n<\/pre>\n<p>This one-liner accomplishes the same task: it inserts a new paragraph element, complete with text, right before the closing body tag.<\/p>\n<h2>Concluding Remarks<\/h2>\n<p>As you can see, jQuery\u2019s <code>.append()<\/code> function allows us to add new elements more efficiently compared to using plain JavaScript. However, there are situations where using JavaScript might be more appropriate, which is why we\u2019ve covered both methods.<\/p>\n<p>This tutorial is just the beginning. In the next installment, we\u2019ll delve into more advanced techniques for element insertion. Stay tuned for more!<\/p>\n<p>If you have any questions or comments about this tutorial, feel free to leave them in the comment section below.<\/p>","protected":false},"excerpt":{"rendered":"<p>jQuery is an incredibly popular JavaScript library that simplifies many tasks. With jQuery, you can effortlessly manipulate HTML elements, create animations, and much more. In this tutorial, we\u2019ll explore how to create and insert new elements into the DOM using jQuery\u2019s Append method. Understanding Element Insertion Appending is a technique for creating and inserting a&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[911],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Create and Insert New Elements with jQuery (Part 1) - Hongkiat<\/title>\n<meta name=\"description\" content=\"jQuery is an incredibly popular JavaScript library that simplifies many tasks. With jQuery, you can effortlessly manipulate HTML elements, create\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create and Insert New Elements with jQuery (Part 1)\" \/>\n<meta property=\"og:description\" content=\"jQuery is an incredibly popular JavaScript library that simplifies many tasks. With jQuery, you can effortlessly manipulate HTML elements, create\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part1\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-05-20T13:01:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:33:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-insert-element-part1\/append-div-js.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-insert-element-part1\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-insert-element-part1\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Create and Insert New Elements with jQuery (Part 1)\",\"datePublished\":\"2013-05-20T13:01:41+00:00\",\"dateModified\":\"2025-04-03T17:33:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-insert-element-part1\\\/\"},\"wordCount\":564,\"commentCount\":18,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-insert-element-part1\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-insert-element-part1\\\/append-div-js.jpg\",\"keywords\":[\"jQuery\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-insert-element-part1\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-insert-element-part1\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-insert-element-part1\\\/\",\"name\":\"How to Create and Insert New Elements with jQuery (Part 1) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-insert-element-part1\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-insert-element-part1\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-insert-element-part1\\\/append-div-js.jpg\",\"datePublished\":\"2013-05-20T13:01:41+00:00\",\"dateModified\":\"2025-04-03T17:33:09+00:00\",\"description\":\"jQuery is an incredibly popular JavaScript library that simplifies many tasks. With jQuery, you can effortlessly manipulate HTML elements, create\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-insert-element-part1\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-insert-element-part1\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-insert-element-part1\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-insert-element-part1\\\/append-div-js.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-insert-element-part1\\\/append-div-js.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-insert-element-part1\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create and Insert New Elements with jQuery (Part 1)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create and Insert New Elements with jQuery (Part 1) - Hongkiat","description":"jQuery is an incredibly popular JavaScript library that simplifies many tasks. With jQuery, you can effortlessly manipulate HTML elements, create","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:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part1\/","og_locale":"en_US","og_type":"article","og_title":"How to Create and Insert New Elements with jQuery (Part 1)","og_description":"jQuery is an incredibly popular JavaScript library that simplifies many tasks. With jQuery, you can effortlessly manipulate HTML elements, create","og_url":"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part1\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-05-20T13:01:41+00:00","article_modified_time":"2025-04-03T17:33:09+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/jquery-insert-element-part1\/append-div-js.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part1\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part1\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Create and Insert New Elements with jQuery (Part 1)","datePublished":"2013-05-20T13:01:41+00:00","dateModified":"2025-04-03T17:33:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part1\/"},"wordCount":564,"commentCount":18,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part1\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-insert-element-part1\/append-div-js.jpg","keywords":["jQuery"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part1\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part1\/","url":"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part1\/","name":"How to Create and Insert New Elements with jQuery (Part 1) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part1\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part1\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-insert-element-part1\/append-div-js.jpg","datePublished":"2013-05-20T13:01:41+00:00","dateModified":"2025-04-03T17:33:09+00:00","description":"jQuery is an incredibly popular JavaScript library that simplifies many tasks. With jQuery, you can effortlessly manipulate HTML elements, create","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part1\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part1\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/jquery-insert-element-part1\/append-div-js.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-insert-element-part1\/append-div-js.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create and Insert New Elements with jQuery (Part 1)"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4t4","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17178","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=17178"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17178\/revisions"}],"predecessor-version":[{"id":73596,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17178\/revisions\/73596"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=17178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=17178"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=17178"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=17178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}