How to insert a large block of HTML in JavaScript

Question

If I have a block of HTML with many tags  how do insert it in JavaScript   var div   document createElement  div    div setAttribute  class    post block bc2    div innerHTML    HERE TOO MUCH HTML that is much more than one line of code   document getElementById  posts   appendChild div     How do I do it right

User · Answer

Despite the imprecise nature of the question  here s my interpretive answer   var html           lt div gt  A line lt  div gt          lt div gt  Add more lines lt  div gt          lt div gt  To the array as you need  lt  div gt     join       var div   document createElement  div        div setAttribute  class    post block bc2        div innerHTML   html      document getElementById  posts   appendChild div

User · Answer

If I understand correctly  you re looking for a multi-line representation  for readability   You want something like a here-string in other languages   Javascript can come close with this   var x         lt div gt         lt span gt         lt p gt        some text        lt  p gt         lt  div gt

User · Answer

The easiest way to insert html blocks is to use template strings  backticks   It will also allow you to insert dynamic content via          document getElementById  log-menu   innerHTML                  lt a href     gt                    data user email               lt  a gt               lt div class  dropdown-menu p-3 dropdown-menu-right  gt                   lt div class  form-group  gt                       lt label for  email1  gt Logged in as  lt  label gt                       lt p gt   data user email  lt  p gt                   lt  div gt                   lt button onClick  getLogout      gt Sign out lt  button gt               lt  div gt

User · Answer

If you are using on the same domain then you can create a seperate HTML file and then import this using the code from this answer by  Stano    https   stackoverflow com a 34579496 2468603

User · Answer

Template literals may solve your issue as it will allow writing multi-line strings and string interpolation features  You can use variables or expression inside string  as given below   It s easy to insert bulk html in a reader friendly way   I have modified the example given in question and please see it below  I am not sure how much browser compatible Template literals are  Please read about Template literals here    x000D   x000D  var a   1  b   2  x000D  var div   document createElement  div    x000D  div setAttribute  class    post block bc2    x000D  div innerHTML     x000D       lt div class  parent  gt  x000D           lt div class  child  gt   a  lt  div gt  x000D           lt div class  child  gt   lt  div gt  x000D           lt div class  child  gt   b  lt  div gt  x000D           lt div class  child  gt   lt  div gt  x000D           lt div class  child  gt   a   b  lt  div gt  x000D       lt  div gt  x000D     x000D  document getElementById  posts   appendChild div   x000D   parent   x000D    background-color  blue  x000D    display  flex  x000D    justify-content  center  x000D    x000D   post div   x000D    color  white  x000D    font-size  2 5em  x000D    padding  20px  x000D    x000D   lt div id  posts  gt  lt  div gt  x000D   x000D   x000D

User · Answer

This answer does not use backticks template literals template strings       which are not supported by Internet Explorer  Using HTML   JavaScript  You could keep the HTML block in an invisible container  like a  lt script gt   within your HTML code  then use its innerHTML at runtime in JS For example   x000D   x000D  var div   document createElement  div    div setAttribute  class    someClass    div innerHTML   document getElementById  blockOfStuff   innerHTML  document getElementById  targetElement   appendChild div   x000D   red       color  red   x000D   lt script id  blockOfStuff  type  text html  gt      Here s some random text       lt h1 gt Including HTML markup lt  h1 gt      And quotes too  or as one man said   These are quotes  but      these  are quotes too    lt  script gt    lt div id  targetElement  class  red  gt  lt  div gt  x000D   x000D   x000D   Idea from this answer  JavaScript HERE-doc or other large-quoting mechanism  Using PHP  If you want to insert a particularly long block of HTML in PHP you can use the Nowdoc syntax  like so   lt  php       some var    quot  -  lt b gt isn t that awesome  lt  b gt  quot        echo  lt  lt  lt EOT     Here s some random text       lt h1 gt Including HTML markup lt  h1 gt      And quotes too  or as one man said   quot These are quotes  but  these  are quotes too  quot       lt br gt  lt br gt      The beauty of Nowdoc in PHP is that you can use variables too  some var      lt br gt  lt br gt      Or even a value contained within an array - be it an array from a variable you ve set     yourself  or one of PHP s built-in arrays  E g  a user s IP     SERVER  REMOTE ADDR    EOT     gt   Here s a PHP Fiddle demo of the above code that you can run in your browser  One important thing to note  The  lt  lt  lt EOT and EOT  MUST be on their own line  without any preceding whitespace   One huge advantage of using Nowdoc syntax over the usual starting and stopping your PHP tag is its support for variables  Consider the usual way of doing it  shown in the example below   contrasted to the simplicity of Nowdoc  shown in the example above    lt  php         Load of PHP code here    gt   Now here s some HTML    lt br gt  lt br gt   Let s pretend that this HTML block is actually a couple of hundred lines long  and we need to insert loads of variables lt br gt  lt br gt   Hi  lt  php echo  first name    gt   lt br gt  lt br gt   I can see it s your birthday on  lt  php echo  birthday    gt   what are you hoping to get    lt  php         Another big block of PHP here    gt   And some more HTML   lt  body gt   lt  html gt

User · Answer

Add each line of the code to a variable and then write the variable to your inner HTML  See below       var div   document createElement  div    div setAttribute  class    post block bc2    var str    First Line   str     Second Line   str     So on  all of your lines   div innerHTML   str  document getElementById  posts   appendChild div

[javascript] How to insert a large block of HTML in JavaScript?

Examples related to javascript

Examples related to html