{"id":16001,"date":"2022-10-13T20:48:02","date_gmt":"2022-10-13T15:18:02","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-how-to-create-dynamic-nested-divs-within-ul-li-tag-using-jquery\/"},"modified":"2022-10-13T20:48:02","modified_gmt":"2022-10-13T15:18:02","slug":"solved-how-to-create-dynamic-nested-divs-within-ul-li-tag-using-jquery","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-how-to-create-dynamic-nested-divs-within-ul-li-tag-using-jquery\/","title":{"rendered":"[Solved] How to create dynamic nested divs within ul li tag using jquery"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-28105183\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"28105183\" data-parentid=\"28105063\" data-score=\"1\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>First, give the ui a id, i choose <code>rootEl<\/code><\/p>\n<pre><code>&lt;ui id=\"rootEl\"&gt;\n&lt;\/ui&gt;\n<\/code><\/pre>\n<p>Second, this JavaScript:<\/p>\n<pre><code>var rootEl = document.getElementById('rootEl');\n\nfunction appendStuff() {\n    var listItem = document.createElement('li');\n    var videoThumbnail = document.createElement('div');\n    var myImage = document.createElement('img');\n    var videoDesc = document.createElement('div');\n    var videoDate = document.createElement('div');\n    videoThumbnail.setAttribute('class','videoThumbnail');\n    myImage.src = \"https:\/\/stackoverflow.com\/questions\/28105063\/.\/img6.jpg\";\n    videoDesc.setAttribute('class','videoDesc');\n    videoDate.setAttribute('class','videoDate');\n    videoDesc.innerHTML = \"Lorem ipsum dolor sit amet\";\n    videoDate.innerHTML = \"02\/07\/2012\";\n\n    videoThumbnail.appendChild(myImage);\n    videoThumbnail.appendChild(videoDesc);\n    videoThumbnail.appendChild(videoDate);\n    listItem.appendChild(videoThumbnail);\n\n    rootEl.appendChild(listItem);\n}\n<\/code><\/pre>\n<p>finally, a button to create that stuff and append it<\/p>\n<pre><code>&lt;button onclick=\"appendStuff()\"&gt;click me&lt;\/button&gt;\n<\/code><\/pre>\n<p>Now, every time you click that Button, you will append that stuff, if you doesnt want to have it multiple times you can modify my function to display other data or just make the button invisible or disable it <strong>I please you to ask google before you ask here<\/strong>.<\/p>\n<\/p><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\"><\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved How to create dynamic nested divs within ul li tag using jquery <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] First, give the ui a id, i choose rootEl &lt;ui id=&#8221;rootEl&#8221;&gt; &lt;\/ui&gt; Second, this JavaScript: var rootEl = document.getElementById(&#8216;rootEl&#8217;); function appendStuff() { var listItem = document.createElement(&#8216;li&#8217;); var videoThumbnail = document.createElement(&#8216;div&#8217;); var myImage = document.createElement(&#8216;img&#8217;); var videoDesc = document.createElement(&#8216;div&#8217;); var videoDate = document.createElement(&#8216;div&#8217;); videoThumbnail.setAttribute(&#8216;class&#8217;,&#8217;videoThumbnail&#8217;); myImage.src = &#8220;https:\/\/stackoverflow.com\/questions\/28105063\/.\/img6.jpg&#8221;; videoDesc.setAttribute(&#8216;class&#8217;,&#8217;videoDesc&#8217;); videoDate.setAttribute(&#8216;class&#8217;,&#8217;videoDate&#8217;); videoDesc.innerHTML = &#8220;Lorem ipsum dolor sit &#8230; <a title=\"[Solved] How to create dynamic nested divs within ul li tag using jquery\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-how-to-create-dynamic-nested-divs-within-ul-li-tag-using-jquery\/\" aria-label=\"More on [Solved] How to create dynamic nested divs within ul li tag using jquery\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[464,346,333,388],"class_list":["post-16001","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-html","tag-javascript","tag-jquery"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>[Solved] How to create dynamic nested divs within ul li tag using jquery - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-how-to-create-dynamic-nested-divs-within-ul-li-tag-using-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] How to create dynamic nested divs within ul li tag using jquery - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] First, give the ui a id, i choose rootEl &lt;ui id=&quot;rootEl&quot;&gt; &lt;\/ui&gt; Second, this JavaScript: var rootEl = document.getElementById(&#039;rootEl&#039;); function appendStuff() { var listItem = document.createElement(&#039;li&#039;); var videoThumbnail = document.createElement(&#039;div&#039;); var myImage = document.createElement(&#039;img&#039;); var videoDesc = document.createElement(&#039;div&#039;); var videoDate = document.createElement(&#039;div&#039;); videoThumbnail.setAttribute(&#039;class&#039;,&#039;videoThumbnail&#039;); myImage.src = &quot;https:\/\/stackoverflow.com\/questions\/28105063\/.\/img6.jpg&quot;; videoDesc.setAttribute(&#039;class&#039;,&#039;videoDesc&#039;); videoDate.setAttribute(&#039;class&#039;,&#039;videoDate&#039;); videoDesc.innerHTML = &quot;Lorem ipsum dolor sit ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-how-to-create-dynamic-nested-divs-within-ul-li-tag-using-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-13T15:18:02+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-to-create-dynamic-nested-divs-within-ul-li-tag-using-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-to-create-dynamic-nested-divs-within-ul-li-tag-using-jquery\\\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] How to create dynamic nested divs within ul li tag using jquery\",\"datePublished\":\"2022-10-13T15:18:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-to-create-dynamic-nested-divs-within-ul-li-tag-using-jquery\\\/\"},\"wordCount\":98,\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"keywords\":[\"css\",\"html\",\"javascript\",\"jquery\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-to-create-dynamic-nested-divs-within-ul-li-tag-using-jquery\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-to-create-dynamic-nested-divs-within-ul-li-tag-using-jquery\\\/\",\"name\":\"[Solved] How to create dynamic nested divs within ul li tag using jquery - JassWeb\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\"},\"datePublished\":\"2022-10-13T15:18:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-to-create-dynamic-nested-divs-within-ul-li-tag-using-jquery\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-to-create-dynamic-nested-divs-within-ul-li-tag-using-jquery\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-to-create-dynamic-nested-divs-within-ul-li-tag-using-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] How to create dynamic nested divs within ul li tag using jquery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\\\/\\\/jassweb.com\"],\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/author\\\/jaspritsinghghumangmail-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] How to create dynamic nested divs within ul li tag using jquery - JassWeb","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:\/\/jassweb.com\/solved\/solved-how-to-create-dynamic-nested-divs-within-ul-li-tag-using-jquery\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] How to create dynamic nested divs within ul li tag using jquery - JassWeb","og_description":"[ad_1] First, give the ui a id, i choose rootEl &lt;ui id=\"rootEl\"&gt; &lt;\/ui&gt; Second, this JavaScript: var rootEl = document.getElementById('rootEl'); function appendStuff() { var listItem = document.createElement('li'); var videoThumbnail = document.createElement('div'); var myImage = document.createElement('img'); var videoDesc = document.createElement('div'); var videoDate = document.createElement('div'); videoThumbnail.setAttribute('class','videoThumbnail'); myImage.src = \"https:\/\/stackoverflow.com\/questions\/28105063\/.\/img6.jpg\"; videoDesc.setAttribute('class','videoDesc'); videoDate.setAttribute('class','videoDate'); videoDesc.innerHTML = \"Lorem ipsum dolor sit ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-how-to-create-dynamic-nested-divs-within-ul-li-tag-using-jquery\/","og_site_name":"JassWeb","article_published_time":"2022-10-13T15:18:02+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-create-dynamic-nested-divs-within-ul-li-tag-using-jquery\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-create-dynamic-nested-divs-within-ul-li-tag-using-jquery\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] How to create dynamic nested divs within ul li tag using jquery","datePublished":"2022-10-13T15:18:02+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-create-dynamic-nested-divs-within-ul-li-tag-using-jquery\/"},"wordCount":98,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","html","javascript","jquery"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-create-dynamic-nested-divs-within-ul-li-tag-using-jquery\/","url":"https:\/\/jassweb.com\/solved\/solved-how-to-create-dynamic-nested-divs-within-ul-li-tag-using-jquery\/","name":"[Solved] How to create dynamic nested divs within ul li tag using jquery - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-10-13T15:18:02+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-create-dynamic-nested-divs-within-ul-li-tag-using-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-how-to-create-dynamic-nested-divs-within-ul-li-tag-using-jquery\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-create-dynamic-nested-divs-within-ul-li-tag-using-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] How to create dynamic nested divs within ul li tag using jquery"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/16001","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=16001"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/16001\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=16001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=16001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=16001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}