Markup in Javascript is used to insert HTML elements in javascript.

Impact

  • Creating HTML elements in JS will decrease the readability & maintainability of code affecting reusability as well.
  • This will break the basic principle i.e. separation of presentation and business logic.
  • This will also lead to high memory consumption on the browser, for example creating an HTML element using a jquery object is a heavy data object.
  • This also can reduce the performance of page loading in the browser.

Example(s)

function addHTML() { 
    var wrapper= $('
', { class: 'wrapper' });     var input = $('', { class: 'email', type:'text' });     wrapper.append(input);     $('body').html(wrapper); }

Solution: Email template is embedded in an HTML function

function addHTML() 
{                                              
   $('body').html(Template.emailForm());                  
}                                                                                                                                      

emailForm.hbs

This is a test class

Guidelines

  • Use templates such as handlebar, mustache, etc instead of generating HTML from Javascript.
  • Javascript file should not contain HTML elements.
  • HTML template and JS parameters should work separately.