HTML / JavaScript Snippet Pattern

Useful for Progressive Web Apps (PWA) using App-shell architecture. Where each section and/or div in HTML is a template generated by a JavaScript function. The actual HTML web page contains very little HTML markup, styles informaiton or data.

Web pages only contains data listed below.

• HTML5 landmark tags
• section
• header / footer
• Navigation
• main and etc.
• link tag
• meta tags
• ttile tag
• head tag
• script tags
• aria-label
• aria role
• CSS ID
• CSS Classname

HTML tags, CSS styles and data are inserted dynamically by JavaScript instead of being hard coded into web page.

createSectionHTML(data object, variable or none) {
  
  // Create Parent Tag
  const PARENT-TAG-NAME =  document.createElement('tag-name');
   
   // set Parent Tag properties
   name.innerHTML = argument;
   
  // create child HTML tags
  const CHILD-TAG-NAME =  document.createElement('tag-name');
  
   // Set child tag properties

 // create images
 const image = document.getElementById('SECTION-ID');
  
 // set image prooerties
 image.className = 'restaurant-img';

  // return parent HTML
  return PARENT-TAG-NAME;

Separating HTML tags, CSS styles, scripts and data enables a dynamically generated website using JavaScript templates.