Big HTML to append to elements

[Stribor45]

I have this HTML that I would like to append to current DOM…

<div class='reviews'>
   <div class='review_rows'>
      <div class='user'>
        <div class='left'>  
           <div>Username</div>
                <div>Province</div>
           </div>
           <div class='right'> 
              <div class='wrap'>
                <img src='image.png' />
              </div> 
          </div>
       </div>
      <div class='container_review'>
         <div>
         <div>
      </div> 
      <div itemprop='description'>This will be JS variable</div>
           <br />
           <div>This will be JS variable</div>
           <br />
          <span class='num_rating'>4</span> out of <span class='num_rating'>5 stars</span>
    </div> 
  </div>
 </div> 
</div>

I am using this function…

`$(".myClass:last-child").append("above code");`

i noticed when I cut and paste this into my editor that color code goes out of sync suggesting that it is not valid code. I guess my question is what is easiest way to handle append when you have large HTML to append?

[Stribor45]

@Stribor45

My goal here is to add this content every time user fills out the form to post content. Every time post is made this code above will be appended to the last child. If someone can maybe suggest if there is better way to do this.

[m_hutley]

“Easiest”

Always a tricky word.

You can put the multiline text in backticks (`), but the general statement would be “You should avoid doing that”. Assuming you dont want to append this thing multiple times. Consider instead hiding the div in the HTML (display:none), then using Javascript to fill in the values in before revealing it.

[m_hutley]

If you ARE going to append it multiple times, then you’ll have to store the string as a variable, and will want the backtick encapsulation.

Check out the definition of Template Literals

[Stribor45]

That worked well…Inserting expressions within was cool

Thanks for the tip