InsertAfter long block of HTML using Javascript

Question

I'm attempting to insert a long block of HTML after a div element using javascript. I've tried a few methods, but none seem to work. This is what I have now. How do you insert a long block of HTML after a div container using Javascript?

Injection Javascript

<script>
  $(function() {
$( "<p class="" style="white-space:pre-wrap;" id="yui_3_17_2_1_1582132982979_54">Sabine the Queen<br>
<strong data-shrink-original-size="75">A Global Real Estate &amp; Lifestyle Brand<br></strong>
<a href="/properties" target="">Our Properties</a></p>" ).insertAfter( ".sqs-gallery" );
    });
</script>

Container

<div class="sqs-gallery">
This is a slideshow.
</div>

Answer 1

It looks like you've got unescaped quotation marks that may be fouling up the HTML markup. Swap out your outer quotation marks for single marks or escape the inner quoation marks

Swapping quotation marks:

<script>
  $(function() {
$( '<p class="" style="white-space:pre-wrap;" id="yui_3_17_2_1_1582132982979_54">Sabine the Queen<br>
<strong data-shrink-original-size="75">A Global Real Estate &amp; Lifestyle Brand<br></strong>
<a href="/properties" target="">Our Properties</a></p>' ).insertAfter( ".sqs-gallery" );
    });
</script>

Note the single quote I've put at the start and end of your HTML string

Escaping:

<script>
  $(function() {
$( "<p class=\"\" style=\"white-space:pre-wrap;\" id=\"yui_3_17_2_1_1582132982979_54\">Sabine the Queen<br>
<strong data-shrink-original-size=\"75\">A Global Real Estate &amp; Lifestyle Brand<br></strong>
<a href=\"/properties\" target=\"\">Our Properties</a></p>" ).insertAfter( ".sqs-gallery" );
    });
</script>

To escape the double quotation mark within you string, it should be preceded by a backslash. This tells the browser that this quotation mark is not the partner for the first one and to keep going. If it's unescaped then it thinks the string is a lot shorter than you meant and breaks