{"id":17193,"date":"2013-05-22T21:01:34","date_gmt":"2013-05-22T13:01:34","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17193"},"modified":"2025-04-04T01:33:21","modified_gmt":"2025-04-03T17:33:21","slug":"jquery-insert-element-part2","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part2\/","title":{"rendered":"jQuery Guide: How to Create and Place New Elements Effectively (Part 2)"},"content":{"rendered":"<p>In our <a href=\"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part1\/\">previous article<\/a>, we began exploring how to create and insert new elements using jQuery\u2019s Append method. We covered the basics of adding new elements to the HTML body.<\/p>\n<p>This time, we\u2019re going a step further. We\u2019ll look at how to place new elements at specific locations within an existing structure, rather than just at the end.<\/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-part1\/\" class=\"ref-block__link\" title=\"Read More: How to Create and Insert New Elements with jQuery (Part 1)\" rel=\"bookmark\"><span class=\"screen-reader-text\">How to Create and Insert New Elements with jQuery (Part 1)<\/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-part1.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-17178 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/jquery-insert-element-part1.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">How to Create and Insert New Elements with jQuery (Part 1)<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tjQuery is an incredibly popular JavaScript library that simplifies many tasks. With jQuery, you can effortlessly manipulate HTML...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<p>To illustrate this, we\u2019ve set up an HTML unordered list as an example. This list has an id attribute labeled as <strong>list<\/strong>.<\/p>\n<pre>\r\n &lt;ul id=\"list\"&gt;\r\n   &lt;li&gt;Ut enim ad minim veniam.&lt;\/li&gt;\r\n   &lt;li&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;\/li&gt;\r\n   &lt;li&gt;Duis aute irure dolor in reprehenderit.&lt;\/li&gt;\r\n   &lt;li&gt;Sunt in culpa qui officia deserunt mollit.&lt;\/li&gt;\r\n   &lt;li&gt;Excepteur sint occaecat cupidatat non proident.&lt;\/li&gt;\r\n &lt;\/ul&gt;\r\n<\/pre>\n<h2>How to Insert a New Element as the First Child<\/h2>\n<p>In this section, we\u2019ll demonstrate how to create a new element and place it as the first child within a parent element. We\u2019ll first explore how to accomplish this using plain JavaScript and then using jQuery.<\/p>\n<p>The goal here is to create a new <code>&lt;li&gt;<\/code> element and insert it as the first child of an existing <code>&lt;ul&gt;<\/code> element. Let\u2019s start by creating the new element and its text content.<\/p>\n<pre>\r\n var li = document.createElement('li'),\r\n txt = document.createTextNode('This is the text in the new element.');\r\n \r\n li.appendChild(txt);\r\n<\/pre>\n<p>To insert the new element as the first child, we\u2019ll use JavaScript\u2019s <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.sitepoint.com\/javascript\/\"><code>.insertBefore()<\/code> function<\/a>. This function allows us to place an element <strong>before<\/strong> another existing element.<\/p>\n<p>Next, we need to identify the parent element where the new element will be nested. In this example, we\u2019ll use the element\u2019s ID attribute to do so:<\/p>\n<pre>\r\n ul = document.getElementById('list');\r\n<\/pre>\n<p>After that, we\u2019ll determine which element the new one should precede. In this case, it\u2019s <strong>the first child of the parent<\/strong>. We can find this first child in JavaScript using the <code>.firstChild<\/code> function, storing it in a variable named <code>firstChild<\/code>.<\/p>\n<pre>\r\n var firstChild = ul.firstChild;\r\n<\/pre>\n<p>Finally, we apply the <code>.insertBefore()<\/code> function as follows:<\/p>\n<pre>\r\n ul.insertBefore(li, firstChild);\r\n<\/pre>\n<p>This code will place the new <code>li<\/code> element before the first child. If you inspect the element using a browser\u2019s Developer Tool, you\u2019ll see the following:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-insert-element-part2\/javascript-inserbefore.jpg\" width=\"462\" height=\"300\" alt=\"JavaScript insertBefore Example\"><\/figure>\n<p>As you can see, our new element is now the first child of the <code>&lt;ul&gt;<\/code>.<\/p>\n<h3>Inserting Elements Using jQuery<\/h3>\n<p>Alternatively, you can use jQuery\u2019s <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/api.jquery.com\/prepend\/\"><code>.prepend()<\/code> function<\/a> to achieve the same result in a more straightforward manner.<\/p>\n<pre>\r\n $('#list').prepend('&lt;li&gt;This is the text in the new element. (using jQuery)&lt;\/li&gt;');\r\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-insert-element-part2\/jquery-prepend.jpg\" width=\"500\" height=\"180\" alt=\"jQuery prepend Example\"><\/figure>\n<h2>How to Insert a New Element at a Specific Position<\/h2>\n<p>In this section, we\u2019ll explore how to insert a new element at a specific location within a list, such as <strong>before<\/strong> or <strong>after<\/strong> the 3<sup>rd<\/sup> child. We\u2019ll cover both JavaScript and jQuery methods for achieving this.<\/p>\n<p>Let\u2019s start by creating a new element, similar to our previous example:<\/p>\n<pre>\r\n var li = document.createElement('li'),\r\n txt = document.createTextNode('This is the text in the new element.');\r\n li.appendChild(txt);\r\n<\/pre>\n<p>First, we need to identify the list elements. In JavaScript, we can use the <code>.getElementsByTagName()<\/code> method to select elements by their tag name:<\/p>\n<pre>\r\n var list = document.getElementsByTagName('li');\r\n<\/pre>\n<p>Next, we\u2019ll target the 3<sup>rd<\/sup> list element by its index number. In JavaScript, indexing starts at <code>0<\/code>, so the 3<sup>rd<\/sup> element corresponds to index <code>2<\/code>. We\u2019ll store this element in a variable named <code>nthList<\/code>:<\/p>\n<pre>\r\n var nthList = list[2];\r\n<\/pre>\n<p>Now, to insert the new element <strong>before the 3<sup>rd<\/sup> child<\/strong>, we can use the <code>.insertBefore()<\/code> function:<\/p>\n<pre>\r\n ul.insertBefore(li, nthList);\r\n<\/pre>\n<p>If you inspect the list in a browser, you\u2019ll see the following:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-insert-element-part2\/javascript-insertbefore-specific.jpg\" width=\"500\" height=\"176\" alt=\"JavaScript insertBefore Specific Example\"><\/figure>\n<p>To insert the new element <strong>after<\/strong> the 3<sup>rd<\/sup> child, we can use the <code>.insertBefore()<\/code> function in conjunction with <code>.nextSibling<\/code>:<\/p>\n<pre>\r\n ul.insertBefore(li, nthList.nextSibling);\r\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-insert-element-part2\/javascript-insertafter.jpg\" width=\"500\" height=\"178\" alt=\"JavaScript insertAfter Example\"><\/figure>\n<h3>Inserting Elements Using jQuery<\/h3>\n<p>jQuery simplifies this process with the <code>.before()<\/code> and <code>.after()<\/code> functions. We can also use jQuery\u2019s <code>.eq()<\/code> function to target elements by their index.<\/p>\n<p>For example, to insert the new element <strong>before<\/strong> the 3<sup>rd<\/sup> child, you can use:<\/p>\n<pre>\r\n $('li').eq(2).before('&lt;li&gt;This is the text in the new element. (using jQuery)&lt;\/li&gt;');\r\n<\/pre>\n<p>Alternatively, to insert it <strong>after<\/strong> the 3<sup>rd<\/sup> child, you can write:<\/p>\n<pre>\r\n $('li').eq(2).after('&lt;li&gt;This is the text in the new element. (using jQuery)&lt;\/li&gt;');\r\n<\/pre>\n<h2>Conclusion<\/h2>\n<p>We\u2019ve covered how to create and insert new elements using both JavaScript and jQuery. Both methods have their merits, and the choice between them ultimately depends on your specific needs and preferences.<\/p>\n<p>This guide should be particularly useful for those who are new to jQuery or JavaScript. If you have any questions or comments, feel free to share them in the comment section below.<\/p>\n<h2>Additional Resources<\/h2>\n<p>If you\u2019re interested in diving deeper into this topic, here are some valuable resources you can explore:<\/p>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/DOM\/Node.insertBefore\">JavaScript .insertBefore Function<\/a> \u2013 MDN<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/DOM\/Node.nextSibling\">JavaScript .nextSibling Function<\/a> \u2013 MDN<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/api.jquery.com\/before\/\">jQuery .before() Function<\/a> \u2013 jQuery API Documentation<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/api.jquery.com\/after\/\">jQuery .after() Function<\/a> \u2013 jQuery API Documentation<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/api.jquery.com\/eq\/\">jQuery .eq() Function<\/a> \u2013 jQuery API Documentation<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>In our previous article, we began exploring how to create and insert new elements using jQuery\u2019s Append method. We covered the basics of adding new elements to the HTML body. This time, we\u2019re going a step further. We\u2019ll look at how to place new elements at specific locations within an existing structure, rather than just&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.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>jQuery Guide: How to Create and Place New Elements Effectively (Part 2) - Hongkiat<\/title>\n<meta name=\"description\" content=\"In our previous article, we began exploring how to create and insert new elements using jQuery&#039;s Append method. We covered the basics of adding new\" \/>\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-part2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery Guide: How to Create and Place New Elements Effectively (Part 2)\" \/>\n<meta property=\"og:description\" content=\"In our previous article, we began exploring how to create and insert new elements using jQuery&#039;s Append method. We covered the basics of adding new\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part2\/\" \/>\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-22T13:01:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:33:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-insert-element-part2\/javascript-inserbefore.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-part2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-insert-element-part2\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"jQuery Guide: How to Create and Place New Elements Effectively (Part 2)\",\"datePublished\":\"2013-05-22T13:01:34+00:00\",\"dateModified\":\"2025-04-03T17:33:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-insert-element-part2\\\/\"},\"wordCount\":648,\"commentCount\":7,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-insert-element-part2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-insert-element-part2\\\/javascript-inserbefore.jpg\",\"keywords\":[\"jQuery\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-insert-element-part2\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-insert-element-part2\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-insert-element-part2\\\/\",\"name\":\"jQuery Guide: How to Create and Place New Elements Effectively (Part 2) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-insert-element-part2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-insert-element-part2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-insert-element-part2\\\/javascript-inserbefore.jpg\",\"datePublished\":\"2013-05-22T13:01:34+00:00\",\"dateModified\":\"2025-04-03T17:33:21+00:00\",\"description\":\"In our previous article, we began exploring how to create and insert new elements using jQuery's Append method. We covered the basics of adding new\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-insert-element-part2\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-insert-element-part2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-insert-element-part2\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-insert-element-part2\\\/javascript-inserbefore.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-insert-element-part2\\\/javascript-inserbefore.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-insert-element-part2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"jQuery Guide: How to Create and Place New Elements Effectively (Part 2)\"}]},{\"@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":"jQuery Guide: How to Create and Place New Elements Effectively (Part 2) - Hongkiat","description":"In our previous article, we began exploring how to create and insert new elements using jQuery's Append method. We covered the basics of adding new","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-part2\/","og_locale":"en_US","og_type":"article","og_title":"jQuery Guide: How to Create and Place New Elements Effectively (Part 2)","og_description":"In our previous article, we began exploring how to create and insert new elements using jQuery's Append method. We covered the basics of adding new","og_url":"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part2\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-05-22T13:01:34+00:00","article_modified_time":"2025-04-03T17:33:21+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/jquery-insert-element-part2\/javascript-inserbefore.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-part2\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part2\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"jQuery Guide: How to Create and Place New Elements Effectively (Part 2)","datePublished":"2013-05-22T13:01:34+00:00","dateModified":"2025-04-03T17:33:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part2\/"},"wordCount":648,"commentCount":7,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part2\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-insert-element-part2\/javascript-inserbefore.jpg","keywords":["jQuery"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part2\/","url":"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part2\/","name":"jQuery Guide: How to Create and Place New Elements Effectively (Part 2) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part2\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part2\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-insert-element-part2\/javascript-inserbefore.jpg","datePublished":"2013-05-22T13:01:34+00:00","dateModified":"2025-04-03T17:33:21+00:00","description":"In our previous article, we began exploring how to create and insert new elements using jQuery's Append method. We covered the basics of adding new","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part2\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/jquery-insert-element-part2\/javascript-inserbefore.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-insert-element-part2\/javascript-inserbefore.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-insert-element-part2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"jQuery Guide: How to Create and Place New Elements Effectively (Part 2)"}]},{"@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-4tj","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17193","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=17193"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17193\/revisions"}],"predecessor-version":[{"id":73598,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17193\/revisions\/73598"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=17193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=17193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=17193"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=17193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}