Defining a HTML template to append using JQuery

Question

I have got an array which I am looping through  Every time a condition is true  I want to append a copy of the HTML code below to a container element with some values   Where can I put this HTML to re-use in a smart way    lt a href     class  list-group-item  gt       lt div class  image  gt            lt img src      gt       lt  div gt       lt p class  list-group-item-text  gt  lt  p gt   lt  a gt    JQuery       search   keyup function             list-items   html null          each items  function index               APPENDING CODE HERE

User · Answer

Use HTML template instead   Since the accepted answer would represent overloading script method  I would like to suggest another which is  in my opinion  much cleaner and more secure due to XSS risks which come with overloading scripts   I made a demo to show you how to use it in an action and how to inject one template into another  edit and then add to the document DOM   example html   lt template id  mytemplate  gt     lt style gt        image          width  100           height  auto            lt  style gt     lt a href     class  list-group-item  gt       lt div class  image  gt         lt img src      gt       lt  div gt       lt p class  list-group-item-text  gt  lt  p gt     lt  a gt   lt  template gt    example js     select var t   document querySelector   mytemplate        set t content querySelector  img   src    demo png   t content querySelector  p   textContent   demo text       add to document DOM var clone   document importNode t content  true      where true means deep copy document body appendChild clone     HTML  lttemplate gt    Its content is effectively inert until activated  Essentially  your markup is hidden DOM and does not render   Any content within a template won t have side effects  Scripts don t run  images don t load  audio doesn t play    until the template is used   Content is considered not to be in the document  Using document getElementById   or querySelector   in the main page won t return child nodes of a template   Templates can be placed anywhere inside of  lt head gt    lt body gt   or  lt frameset gt  and can contain any type of content which is allowed in those elements  Note that  anywhere  means that  lt template gt  can safely be used in places that the HTML parser disallows    Fall back  Browser support should not be an issue but if you want to cover all possibilities you can make an easy check      To feature detect  lt template gt   create the DOM element and check that   the  content property exists    function supportsTemplate       return  content  in document createElement  template       if  supportsTemplate           Good to go    else        Use old templating techniques or libraries      Some insights about Overloading script method    Nothing is rendered - the browser doesn t render this block because the  lt script gt  tag has display none by default   Inert - the browser doesn t parse the script content as JS because its type is set to something other than  text javascript   -Security issues - encourages the use of  innerHTML  Run-time string parsing of user-supplied data can easily lead to XSS vulnerabilities    Full article  https   www html5rocks com en tutorials webcomponents template  toc-old  Useful reference  https   developer mozilla org en-US docs Web API Document importNode http   caniuse com  feat queryselector  CREATING WEB COMPONENTS Creating custom web components tutorial using HTML templates by Trawersy Media  https   youtu be PCWaFLy3VUo

User · Answer

Very good answer from DevWL about using the native HTML5 template element  To contribute to this good question from the OP I would like to add on how to use this template element using jQuery  for example        template   html    insertAfter      somewhere else        The content of the template is not html  but just treated as data  so you need to wrap the content into a jQuery object to then access jQuery s methods

User · Answer

Add somewhere in body   lt div class  hide  gt   lt a href     class  list-group-item  gt       lt table gt           lt tr gt               lt td gt  lt img src    gt  lt  td gt               lt td gt  lt p class  list-group-item-text  gt  lt  p gt  lt  td gt           lt  tr gt       lt  table gt   lt  a gt   lt  div gt    then create css   hide   display  none      and add to your js      output   append      hide   html

User · Answer

Old question  but since the question asks  using jQuery   I thought I d provide an option that lets you do this without introducing any vendor dependency   While there are a lot of templating engines out there  many of their features have fallen in to disfavour recently  with iteration   lt   for   conditionals   lt   if  and transforms   lt    myString   uppercase   gt   seen as microlanguage at best  and anti-patterns at worst  Modern templating practices encourage simply mapping an object to its DOM  or other  representation  e g  what we see with properties mapped to components in ReactJS  especially stateless components    Templates Inside HTML  One property you can rely on for keeping the HTML for your template next to the rest of your HTML  is by using a non-executing  lt script gt  type  e g   lt script type  text template  gt   For your case    lt script type  text template  data-template  listitem  gt       lt a href    url   class  list-group-item  gt           lt table gt               lt tr gt                   lt td gt  lt img src    img   gt  lt  td gt                   lt td gt  lt p class  list-group-item-text  gt   title  lt  p gt  lt  td gt               lt  tr gt           lt  table gt       lt  a gt   lt  script gt    On document load  read your template and tokenize it using a simple String split  var itemTpl      script data-template  listitem     text   split              g     Notice that with our token  you get it in the alternating  text  property  text  property  format  This lets us nicely map it using an Array map  with a mapping function   function render props      return function tok  i    return  i   2    props tok    tok         Where props could look like   url   http   foo com   img    images bar png   title   Lorem Ipsum      Putting it all together assuming you ve parsed and loaded your itemTpl as above  and you have an items array in-scope       search   keyup function            list-items   append items map function  item        return itemTpl map render item   join                   This approach is also only just barely jQuery - you should be able to take the same approach using vanilla javascript with document querySelector and  innerHTML   jsfiddle  Templates inside JS  A question to ask yourself is  do you really want need to define templates as HTML files  You can always componentize   re-use a template the same way you d re-use most things you want to repeat  with a function   In es7-land  using destructuring  template strings  and arrow-functions  you can write downright pretty looking component functions that can be easily loaded using the   fn html method above   const Item      url  img  title      gt       lt a href    url   class  list-group-item  gt       lt div class  image  gt         lt img src    img     gt       lt  div gt       lt p class  list-group-item-text  gt   title  lt  p gt     lt  a gt       Then you could easily render it  even mapped from an array  like so       list-items   html       url    foo   img   foo png   title   Foo item         url    bar   img   bar png   title   Bar item       map Item  join         Oh and final note  don t forget to sanitize your properties passed to a template  if they re read from a DB  or someone could pass in HTML  and then run scripts  etc   from your page

User · Answer

Other alternative  Pure  I use it and it has helped me a lot   An example shown on their website   HTML   lt div class  who  gt   lt  div gt    JSON       who    Hello Wrrrld      Result   lt div class  who  gt    Hello Wrrrld  lt  div gt

User · Answer

In order to solve this problem  I recognize two solutions    The first one goes with AJAX  with which you ll have to load the template from another file and just add everytime you want with  clone       get  url to template   function data        temp   data         search   keyup function                 list-items   html null              each items  function index                   this  append temp clone                               Take into account that the event should be added once the ajax has completed to be sure the data is available  The second one would be to directly add it anywhere in the original html  select it and hide it in jQuery   temp       list group item   hide     You can after add a new instance of the template with       search   keyup function             list-items   html null          each items  function index              this  append temp clone                 Same as the previous one  but if you don t want the template to remain there  but just in the javascript  I think you can use  have not tested it    detach   instead of hide   temp       list group item   detach      detach   removes elements from the DOM while keeping the data and events alive   remove   does not

User · Answer

You could decide to make use of a templating engine in your project  such as    mustache underscore js handlebars   If you don t want to include another library  John Resig offers a jQuery solution  similar to the one below     Browsers and screen readers ignore unrecognized script types    lt script id  hidden-template  type  text x-custom-template  gt       lt tr gt           lt td gt Foo lt  td gt           lt td gt Bar lt  td gt       lt tr gt   lt  script gt    Using jQuery  adding rows based on the template would resemble   var template       hidden-template   html        button addRow   click function             targetTable   append template

[javascript] Defining a HTML template to append using JQuery

Use HTML template instead!

example html

example js

HTML <template>

Fall back

Some insights about Overloading script method

Examples related to javascript

Examples related to jquery

Examples related to json