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.