how to assign a block of html code to a javascript variable

Question

what is the syntax to store a block of html code to a javascript variable    lt div class  saved   gt   lt div  gt test test lt  div gt   lt div class  remove  gt  Remove  lt  div gt  lt  div gt    I want to assign the above code to a variable  test    var test     lt div class  saved   gt   lt div  gt test test lt  div gt   lt div class  remove  gt  Remove  lt  div gt  lt  div gt      but it does not work  which are the correct syntax for assigning the code   TIA

User · Answer

we can use backticks      without any error   eg   lt div gt  test  lt div gt   we can store large template HTML  inside the backticks which was introduced in ES6 javascript standard  No need to escape any special characters  if no backticks   we need to escape characters by appending backslash    eg     test

User · Answer

Just for reference  here is a benchmark of different technique rendering performances   http   jsperf com zp-string-concatenation 6  m

User · Answer

Greetings   I know this is an older post  but I found it through Google when searching for  javascript add large block of html as variable    I thought I d post an alternate solution   First  I d recommend using single-quotes around the variable itself     makes it easier to preserve double-quotes in the actual HTML code   You can use a backslash to separate lines if you want to maintain a sense of formatting to the code   var code     lt div class  my-class  gt             lt h1 gt The Header lt  h1 gt             lt p gt The paragraph of text lt  p gt             lt div class  my-quote  gt                 lt p gt The quote I  d like to put in a div lt  p gt             lt  div gt         lt  div gt      Note  You ll obviously need to escape any single-quotes inside the code  e g  inside the last  p  tag   Anyway  I hope that helps someone else that may be looking for the same answer I was     Cheers

User · Answer

you can make a javascript object with key being name of the html snippet  and value being an array of html strings  that are joined together    var html       top crimes template                lt div class  top crimes  gt  lt h3 gt Top Crimes lt  h3 gt  lt  div gt            lt table class  crimes-table table table-responsive table-bordered  gt              lt tr gt                lt th gt                  lt span class  list-heading  gt Crime  lt  span gt                lt  th gt                lt th gt                  lt span id  last crime span  gt   Arrests lt  span gt                lt  th gt              lt  tr gt            lt  table gt         join        top teams template                lt div class  top teams  gt  lt h3 gt Top Teams lt  h3 gt  lt  div gt            lt table class  teams-table table table-responsive table-bordered  gt              lt tr gt                lt th gt                  lt span class  list-heading  gt Team  lt  span gt                lt  th gt                lt th gt                  lt span id  last team span  gt   Arrests lt  span gt                lt  th gt              lt  tr gt            lt  table gt         join        top players template                lt div class  top players  gt  lt h3 gt Top Players lt  h3 gt  lt  div gt            lt table class  players-table table table-responsive table-bordered  gt              lt tr gt                lt th gt                  lt span class  list-heading  gt Players  lt  span gt                lt  th gt                lt th gt                  lt span id  last player span  gt   Arrests lt  span gt                lt  th gt              lt  tr gt            lt  table gt         join

User · Answer

I recommend to use mustache templating frame work  https   github com janl mustache js     lt body gt                                      lt  --Put your html variable in a script and set the type to  x-tmpl-mustache -- gt          lt script id  template  type  x-tmpl-mustache  gt              lt div class  saved   gt              lt div  gt test test lt  div gt   lt div class  remove  gt  Remove  lt  div gt  lt  div gt       lt  script gt   lt  body gt       You can use it without jquery    var template       template   html      var rendered   Mustache render template         target   html rendered     Why I recommend this    Soon or latter you will try to replace some part of the HTML variable and make it dynamic  Dealing with this as an HTML String will be a headache  Here is where Mustache magic can help you    lt script id  template  type  x-tmpl-mustache  gt    lt div class  remove  gt      name      lt  div gt        lt  script gt    and   var template       template   html        You can pass dynamic template values   var rendered   Mustache render template   name   Luke           target   html rendered     There are lot more features

User · Answer

Please use symbol backtick     in your front and end of html string  this is so called template literals  now you able to write pure html in multiple lines and assign to variable  Example  gt  gt  var htmlString        lt span gt Your lt  span gt   lt p gt HTML lt  p gt

User · Answer

var test     lt div class  saved   gt       lt div  gt test test lt  div gt   lt div class  remove  gt  Remove  lt  div gt  lt  div gt      You can add   n  if you require line-break

User · Answer

Modern Javascript implementations with the template syntax using backticks are also an easy way to assign an HTML block of code to a variable       const firstName    Sam       const fullName    Sam Smith       const htmlString     lt h1 gt Hello   fullName   lt  h1 gt  lt p gt This is some content           that will display  You can even inject your first name    firstName             in the code  lt  p gt  lt p gt  lt a href  http   www google com  gt Search lt  a gt  for           stuff on the Google website  lt  p gt

[javascript] how to assign a block of html code to a javascript variable

Examples related to javascript

Examples related to html