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>

The syntax highlighting in StackOverflow should be a hint. You can't use unescaped double quotes inside of a double-quoted string. — Jeremy Harris
– Jeremy Harris, Commented Feb 19, 2020 at 17:53

DAustin · Accepted Answer · 2020-02-19 17:59:36Z

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

Collectives™ on Stack Overflow

InsertAfter long block of HTML using Javascript

Injection Javascript

Container

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Injection Javascript

Container

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related