{"id":21492,"date":"2019-12-12T12:00:35","date_gmt":"2019-12-12T17:00:35","guid":{"rendered":"https:\/\/webdevstudios.com\/?p=21492"},"modified":"2024-04-15T11:58:02","modified_gmt":"2024-04-15T15:58:02","slug":"render-html-with-javascript","status":"publish","type":"post","link":"https:\/\/webdevstudios.com\/2019\/12\/12\/render-html-with-javascript\/","title":{"rendered":"A Better, Cleaner Way to Render HTML with JavaScript"},"content":{"rendered":"<p>As a <a href=\"https:\/\/webdevstudios.com\/about\/team\/\">team of WordPress developers<\/a>, we often stumble upon a task where we need to request a set of data using AJAX and render it to the browser.<\/p>\n<p>Most of the the time we do it like this:<\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/donmhico\/564fe2ffa3ba919e2b7d8b782aff23d6.js?file=common.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/donmhico\/564fe2ffa3ba919e2b7d8b782aff23d6\">Gist<\/a>.<\/noscript><\/div>\n<p>It works. However, it&#8217;s difficult to maintain this code, and most of the time, the HTML markup we need to use is much more complex than the example above. As more updates and changes occur in the markup, we find it increasingly difficult to work with this code.<\/p>\n<h2>Enter wp.template<\/h2>\n<p>If you are familiar with <a href=\"https:\/\/underscorejs.org\/#template\" target=\"_blank\" rel=\"noopener noreferrer\">Underscore.js<\/a> or <a href=\"http:\/\/mustache.github.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">{{ mustache }}<\/a>, <code>wp.template<\/code> is an underscore-based JavaScript templating helper shipped with WordPress.<\/p>\n<p>So, how do we use it?<\/p>\n<h3>Create and render your HTML markup template<\/h3>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/donmhico\/564fe2ffa3ba919e2b7d8b782aff23d6.js?file=template.php\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/donmhico\/564fe2ffa3ba919e2b7d8b782aff23d6\">Gist<\/a>.<\/noscript><\/div>\n<p>Just with this, we can immediately see how easy it is to maintain our HTML markup.<\/p>\n<h4>Notes<\/h4>\n<p>1. It is important that the HTML markup template is wrapped with <code>&lt;script type=\u201ctext\/html\u201d id=\u201ctmpl-[TEMPLATE-NAME]\u201d&gt;&lt;\/script&gt;<\/code>.<br \/>\n2. The <code>id<\/code> needs to be prefixed with <code>tmpl-<\/code>.<br \/>\n3. <code>data<\/code> is the variable passed to the template from the JavaScript. You&#8217;ll see this shortly.<br \/>\n4. JavaScript logic goes inside <code>&lt;# #&gt;<\/code>.<br \/>\n5. <code>&lt;# _.forEach() #&gt;<\/code> is an Underscore function. See <a href=\"https:\/\/underscorejs.org\/#each\" target=\"_blank\" rel=\"noopener noreferrer\">Underscore.js<\/a>.<br \/>\n6. Use <code>{{ }}<\/code> for escaping output.<br \/>\n7. Use <code>{{{ }}}<\/code> for unescaped output. Using <code>{{ }}<\/code> with data containing markup will convert the tags to HTML entities. So for example, if the data is <code>&lt;img src=\"\"\/&gt;<\/code> and we indeed want to render the image, we need to use <code>{{{ }}}<\/code>.<\/p>\n<h3>Load wp-util<\/h3>\n<p>The code for <code>wp.template<\/code> is inside <a href=\"https:\/\/github.com\/WordPress\/WordPress\/blob\/master\/wp-includes\/js\/wp-util.js\" target=\"_blank\" rel=\"noopener noreferrer\">wp-util<\/a>, so we need to make sure that <code>wp-util.js<\/code> is loaded.<\/p>\n<p>You can do this by adding <code>wp-util<\/code> as a dependency of your JavaScript. Like this:<br \/>\n<code>wp_enqueue_script( 'custom_js', plugins_url( 'js\/custom.js', __FILE__ ), [ 'jquery', 'wp-util' ] );<\/code><\/p>\n<h3>The JavaScript<\/h3>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/donmhico\/564fe2ffa3ba919e2b7d8b782aff23d6.js?file=the-js.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/donmhico\/564fe2ffa3ba919e2b7d8b782aff23d6\">Gist<\/a>.<\/noscript><\/div>\n<h4>A few more notes\u2026<\/h4>\n<p>1. We omit <code>tmpl-<\/code> in <code>wp.template( 'display-posts' )<\/code>.<br \/>\n2. The data we pass to <code>display_posts_template()<\/code> is the <code>data<\/code> variable we use in our template.<\/p>\n<h2>Conclusion<\/h2>\n<p>While we used <code>&lt;# _.forEach() #&gt;<\/code> in our example, it is a good idea to minimize the JavaScript logic in your template. The goal is to separate the <em>&#8220;view&#8221;<\/em> and <em>&#8220;logic.&#8221;<\/em><\/p>\n<p>For example, you can approach our example like this:<\/p>\n<p><strong>JavaScript<\/strong><\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/donmhico\/564fe2ffa3ba919e2b7d8b782aff23d6.js?file=better.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/donmhico\/564fe2ffa3ba919e2b7d8b782aff23d6\">Gist<\/a>.<\/noscript><\/div>\n<p><strong>Template<\/strong><\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/donmhico\/564fe2ffa3ba919e2b7d8b782aff23d6.js?file=better_template.php\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/donmhico\/564fe2ffa3ba919e2b7d8b782aff23d6\">Gist<\/a>.<\/noscript><\/div>\n<p><code>wp.template<\/code> is a good tool to create clean and maintainable code. Another advantage of using this technique is you don\u2019t need to modify your JavaScript when you modify your HTML template. As a developer, it means no re-compiling \/ bundling \/ minifying \/ purging of JavaScript cache is needed.<\/p>\n<p>What do you think? Will these tips help you with a better, cleaner way to render HTML with JavaScript? Leave us a comment below. Need a team to offer up solutions like this for your website project? <a href=\"https:\/\/webdevstudios.com\/contact\/\">Contact us today<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As a team of WordPress developers, we often stumble upon a task where we need to request a set of data using AJAX and render it to the browser. Most of the the time we do it like this: View the code on Gist. It works. However, it&#8217;s difficult to maintain this code, and most <a class=\"more-link\" href=\"https:\/\/webdevstudios.com\/2019\/12\/12\/render-html-with-javascript\/\">Read More<span class=\"screen-reader-text\"> A Better, Cleaner Way to Render HTML with JavaScript<\/span><\/a><\/p>\n","protected":false},"author":116,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"jetpack_post_was_ever_published":false,"footnotes":""},"categories":[140,954,142],"tags":[193,387,11258],"coauthors":[10749],"class_list":["post-21492","post","type-post","status-publish","format-standard","hentry","category-development","category-javascript","category-wordpress","tag-html","tag-javascript-2","tag-wp-template"],"acf":{"blog_hero_image":{"ID":21595,"id":21595,"title":"cleaner way to render html with javascript","filename":"cleaner-way-to-render-html-with-javascript.jpg","filesize":174998,"url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/12\/cleaner-way-to-render-html-with-javascript.jpg","link":"https:\/\/webdevstudios.com\/2019\/12\/12\/render-html-with-javascript\/cleaner-way-to-render-html-with-javascript\/","alt":"","author":"6","description":"","caption":"","name":"cleaner-way-to-render-html-with-javascript","status":"inherit","uploaded_to":21492,"date":"2019-12-11 16:37:35","modified":"2019-12-11 16:37:35","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/webdevstudios.com\/wp-includes\/images\/media\/default.png","width":1920,"height":720,"sizes":{"thumbnail":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/12\/cleaner-way-to-render-html-with-javascript-150x150.jpg","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/12\/cleaner-way-to-render-html-with-javascript-300x113.jpg","medium-width":300,"medium-height":113,"medium_large":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/12\/cleaner-way-to-render-html-with-javascript-768x288.jpg","medium_large-width":768,"medium_large-height":288,"large":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/12\/cleaner-way-to-render-html-with-javascript-1024x384.jpg","large-width":850,"large-height":319,"1536x1536":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/12\/cleaner-way-to-render-html-with-javascript-1536x576.jpg","1536x1536-width":1536,"1536x1536-height":576,"2048x2048":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/12\/cleaner-way-to-render-html-with-javascript.jpg","2048x2048-width":1920,"2048x2048-height":720,"featured-work-lg":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/12\/cleaner-way-to-render-html-with-javascript-436x511.jpg","featured-work-lg-width":436,"featured-work-lg-height":511,"featured-work-sm":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/12\/cleaner-way-to-render-html-with-javascript-436x241.jpg","featured-work-sm-width":436,"featured-work-sm-height":241,"book-cover":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/12\/cleaner-way-to-render-html-with-javascript-235x300.jpg","book-cover-width":235,"book-cover-height":300,"home-hero":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/12\/cleaner-way-to-render-html-with-javascript-1350x440.jpg","home-hero-width":1350,"home-hero-height":440,"services-screenshot":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/12\/cleaner-way-to-render-html-with-javascript-590x720.jpg","services-screenshot-width":590,"services-screenshot-height":720,"single-blog-featured":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/12\/cleaner-way-to-render-html-with-javascript-1920x625.jpg","single-blog-featured-width":1920,"single-blog-featured-height":625,"single-blog-inline":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/12\/cleaner-way-to-render-html-with-javascript-850x360.jpg","single-blog-inline-width":850,"single-blog-inline-height":360,"grid-image":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/12\/cleaner-way-to-render-html-with-javascript-420x420.jpg","grid-image-width":420,"grid-image-height":420,"logo-train":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/12\/cleaner-way-to-render-html-with-javascript-160x60.jpg","logo-train-width":160,"logo-train-height":60,"simple-header":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/12\/cleaner-way-to-render-html-with-javascript-1920x191.jpg","simple-header-width":1920,"simple-header-height":191,"full-width":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/12\/cleaner-way-to-render-html-with-javascript.jpg","full-width-width":1920,"full-width-height":720,"fifty-fifty-media":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/12\/cleaner-way-to-render-html-with-javascript-1300x488.jpg","fifty-fifty-media-width":1300,"fifty-fifty-media-height":488,"gform-image-choice-sm":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/12\/cleaner-way-to-render-html-with-javascript.jpg","gform-image-choice-sm-width":300,"gform-image-choice-sm-height":113,"gform-image-choice-md":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/12\/cleaner-way-to-render-html-with-javascript.jpg","gform-image-choice-md-width":400,"gform-image-choice-md-height":150,"gform-image-choice-lg":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/12\/cleaner-way-to-render-html-with-javascript.jpg","gform-image-choice-lg-width":600,"gform-image-choice-lg-height":225}}},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>A Better, Cleaner Way to Render HTML with JavaScript - WebDevStudios<\/title>\n<meta name=\"description\" content=\"Ready to learn something new and up your WordPress skills? Read this blog post to learn a better, cleaner way to render HTMl with JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdevstudios.com\/2019\/12\/12\/render-html-with-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Better, Cleaner Way to Render HTML with JavaScript\" \/>\n<meta property=\"og:description\" content=\"Ready to learn something new and up your WordPress skills? Read this blog post to learn a better, cleaner way to render HTMl with JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdevstudios.com\/2019\/12\/12\/render-html-with-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"WebDevStudios\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/webdevstudios\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-12T17:00:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-15T15:58:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/12\/Maintainn-Blog-Social-Template-2019-12-11T110848.154.png\" \/>\n\t<meta property=\"og:image:width\" content=\"560\" \/>\n\t<meta property=\"og:image:height\" content=\"315\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Michael Joseph Panaga\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Ready to learn something new and up your WordPress skills? Read this blog post to learn a better, cleaner way to render HTMl with JavaScript.\" \/>\n<meta name=\"twitter:creator\" content=\"@webdevstudios\" \/>\n<meta name=\"twitter:site\" content=\"@webdevstudios\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael Joseph Panaga\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2019\\\/12\\\/12\\\/render-html-with-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2019\\\/12\\\/12\\\/render-html-with-javascript\\\/\"},\"author\":{\"name\":\"Michael Joseph Panaga\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/person\\\/483cb3b481eba973ace1c5108b454aca\"},\"headline\":\"A Better, Cleaner Way to Render HTML with JavaScript\",\"datePublished\":\"2019-12-12T17:00:35+00:00\",\"dateModified\":\"2024-04-15T15:58:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2019\\\/12\\\/12\\\/render-html-with-javascript\\\/\"},\"wordCount\":485,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#organization\"},\"keywords\":[\"HTML\",\"javascript\",\"wp.template\"],\"articleSection\":[\"Development\",\"JavaScript\",\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webdevstudios.com\\\/2019\\\/12\\\/12\\\/render-html-with-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2019\\\/12\\\/12\\\/render-html-with-javascript\\\/\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/2019\\\/12\\\/12\\\/render-html-with-javascript\\\/\",\"name\":\"A Better, Cleaner Way to Render HTML with JavaScript - WebDevStudios\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#website\"},\"datePublished\":\"2019-12-12T17:00:35+00:00\",\"dateModified\":\"2024-04-15T15:58:02+00:00\",\"description\":\"Ready to learn something new and up your WordPress skills? Read this blog post to learn a better, cleaner way to render HTMl with JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2019\\\/12\\\/12\\\/render-html-with-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webdevstudios.com\\\/2019\\\/12\\\/12\\\/render-html-with-javascript\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2019\\\/12\\\/12\\\/render-html-with-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webdevstudios.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Better, Cleaner Way to Render HTML with JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#website\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/\",\"name\":\"WebDevStudios\",\"description\":\"WordPress Design and Development Agency\",\"publisher\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/webdevstudios.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#organization\",\"name\":\"WebDevStudios\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/wds-amp-logo.png\",\"contentUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/wds-amp-logo.png\",\"width\":173,\"height\":60,\"caption\":\"WebDevStudios\"},\"image\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"http:\\\/\\\/facebook.com\\\/webdevstudios\",\"https:\\\/\\\/x.com\\\/webdevstudios\",\"http:\\\/\\\/instagram.com\\\/webdevstudios\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/webdevstudios-llc-\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/person\\\/483cb3b481eba973ace1c5108b454aca\",\"name\":\"Michael Joseph Panaga\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3c73011c5045dbefd69a2866a0afa013af2d7d4bc3bdbd1d90ffa41912b568f2?s=96&d=mm&r=g091fd7d41e99ebf07ef4b35fcee6d770\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3c73011c5045dbefd69a2866a0afa013af2d7d4bc3bdbd1d90ffa41912b568f2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3c73011c5045dbefd69a2866a0afa013af2d7d4bc3bdbd1d90ffa41912b568f2?s=96&d=mm&r=g\",\"caption\":\"Michael Joseph Panaga\"},\"url\":\"https:\\\/\\\/webdevstudios.com\\\/author\\\/michael-panagawebdevstudios-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A Better, Cleaner Way to Render HTML with JavaScript - WebDevStudios","description":"Ready to learn something new and up your WordPress skills? Read this blog post to learn a better, cleaner way to render HTMl with JavaScript.","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:\/\/webdevstudios.com\/2019\/12\/12\/render-html-with-javascript\/","og_locale":"en_US","og_type":"article","og_title":"A Better, Cleaner Way to Render HTML with JavaScript","og_description":"Ready to learn something new and up your WordPress skills? Read this blog post to learn a better, cleaner way to render HTMl with JavaScript.","og_url":"https:\/\/webdevstudios.com\/2019\/12\/12\/render-html-with-javascript\/","og_site_name":"WebDevStudios","article_publisher":"http:\/\/facebook.com\/webdevstudios","article_published_time":"2019-12-12T17:00:35+00:00","article_modified_time":"2024-04-15T15:58:02+00:00","og_image":[{"width":560,"height":315,"url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/12\/Maintainn-Blog-Social-Template-2019-12-11T110848.154.png","type":"image\/png"}],"author":"Michael Joseph Panaga","twitter_card":"summary_large_image","twitter_description":"Ready to learn something new and up your WordPress skills? Read this blog post to learn a better, cleaner way to render HTMl with JavaScript.","twitter_creator":"@webdevstudios","twitter_site":"@webdevstudios","twitter_misc":{"Written by":"Michael Joseph Panaga","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdevstudios.com\/2019\/12\/12\/render-html-with-javascript\/#article","isPartOf":{"@id":"https:\/\/webdevstudios.com\/2019\/12\/12\/render-html-with-javascript\/"},"author":{"name":"Michael Joseph Panaga","@id":"https:\/\/webdevstudios.com\/#\/schema\/person\/483cb3b481eba973ace1c5108b454aca"},"headline":"A Better, Cleaner Way to Render HTML with JavaScript","datePublished":"2019-12-12T17:00:35+00:00","dateModified":"2024-04-15T15:58:02+00:00","mainEntityOfPage":{"@id":"https:\/\/webdevstudios.com\/2019\/12\/12\/render-html-with-javascript\/"},"wordCount":485,"commentCount":1,"publisher":{"@id":"https:\/\/webdevstudios.com\/#organization"},"keywords":["HTML","javascript","wp.template"],"articleSection":["Development","JavaScript","WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdevstudios.com\/2019\/12\/12\/render-html-with-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdevstudios.com\/2019\/12\/12\/render-html-with-javascript\/","url":"https:\/\/webdevstudios.com\/2019\/12\/12\/render-html-with-javascript\/","name":"A Better, Cleaner Way to Render HTML with JavaScript - WebDevStudios","isPartOf":{"@id":"https:\/\/webdevstudios.com\/#website"},"datePublished":"2019-12-12T17:00:35+00:00","dateModified":"2024-04-15T15:58:02+00:00","description":"Ready to learn something new and up your WordPress skills? Read this blog post to learn a better, cleaner way to render HTMl with JavaScript.","breadcrumb":{"@id":"https:\/\/webdevstudios.com\/2019\/12\/12\/render-html-with-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdevstudios.com\/2019\/12\/12\/render-html-with-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webdevstudios.com\/2019\/12\/12\/render-html-with-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdevstudios.com\/"},{"@type":"ListItem","position":2,"name":"A Better, Cleaner Way to Render HTML with JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/webdevstudios.com\/#website","url":"https:\/\/webdevstudios.com\/","name":"WebDevStudios","description":"WordPress Design and Development Agency","publisher":{"@id":"https:\/\/webdevstudios.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdevstudios.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdevstudios.com\/#organization","name":"WebDevStudios","url":"https:\/\/webdevstudios.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevstudios.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/07\/wds-amp-logo.png","contentUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/07\/wds-amp-logo.png","width":173,"height":60,"caption":"WebDevStudios"},"image":{"@id":"https:\/\/webdevstudios.com\/#\/schema\/logo\/image\/"},"sameAs":["http:\/\/facebook.com\/webdevstudios","https:\/\/x.com\/webdevstudios","http:\/\/instagram.com\/webdevstudios","https:\/\/www.linkedin.com\/company\/webdevstudios-llc-\/"]},{"@type":"Person","@id":"https:\/\/webdevstudios.com\/#\/schema\/person\/483cb3b481eba973ace1c5108b454aca","name":"Michael Joseph Panaga","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3c73011c5045dbefd69a2866a0afa013af2d7d4bc3bdbd1d90ffa41912b568f2?s=96&d=mm&r=g091fd7d41e99ebf07ef4b35fcee6d770","url":"https:\/\/secure.gravatar.com\/avatar\/3c73011c5045dbefd69a2866a0afa013af2d7d4bc3bdbd1d90ffa41912b568f2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3c73011c5045dbefd69a2866a0afa013af2d7d4bc3bdbd1d90ffa41912b568f2?s=96&d=mm&r=g","caption":"Michael Joseph Panaga"},"url":"https:\/\/webdevstudios.com\/author\/michael-panagawebdevstudios-com\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3WX6u-5AE","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/posts\/21492","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/users\/116"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/comments?post=21492"}],"version-history":[{"count":0,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/posts\/21492\/revisions"}],"wp:attachment":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/media?parent=21492"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/categories?post=21492"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/tags?post=21492"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/coauthors?post=21492"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}