Prepending HTML with JavaScript & CSS references

Hi there,

I’m currently having problems with pre-pending HTML which has a number of JavaScript / CSS references within it.
I have minified the HTML so that the line breaks do not cause any issues and done a find and replace on all double-quotation marks and replaced them with “&quot”.

However, when I try to run the prepend within the Chrome Developer Console I get the error message “Uncaught SyntaxError: Unexpected token <” which is related to jquery-1.11.2.min.js which is the version running on the site I’m working on.

Below is the JS I’m trying to add in:

$( ".cont.main.mb" ).prepend("<link href=&quot;https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,400italic&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/><link href=&quot;ws-responsive-normalize.css&quot; rel=&quot;stylesheet&quot;/><link href=&quot;ws-responsive-skeleton_nomargin_generaluse.css&quot; rel=&quot;stylesheet&quot;/><link href=&quot;owl-carousel.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/><link href=&quot;en-mobile-delivery-slider.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/><style type=&quot;text/css&quot;>@media (max-width: 550px){#ws-responsive-container .container{padding:0 0.5rem !important;}#ws-responsive-container .columns.three{padding:0 !important;width:25% !important;}}/* START OF generic CSS */#ws-responsive-container{background-color:#f2f2f2;}#ws-responsive-container h1,#ws-responsive-container h2,#ws-responsive-container h3,#ws-responsive-container h4,#ws-responsive-container h5,#ws-responsive-container h6,#ws-responsive-container p,#ws-responsive-container ul li,#ws-responsive-container a,#ws-responsive-container a:hover,#ws-responsive-container a:visited{font-family:'Open Sans', Arial, sans-serif;color:#58595b;letter-spacing:0rem;text-decoration:none;}/* END OF generic CSS *//* START OF owl carousel CSS */#ws-responsive-container .owl-carousel .item{text-align:center;}#ws-responsive-container .owl-carousel .owl-wrapper{display: table !important;}#ws-responsive-container .owl-carousel .owl-item{display: table-cell;float: none;vertical-align: middle;}/* END OF owl carousel CSS */#ws-responsive-container .columns.three{padding:0 1rem;}#ws-responsive-container p{padding:1rem 0;margin:0;}#ws-responsive-container p a img{width:50px;height:auto;padding-right: 10px; vertical-align: middle;}#ws-responsive-container p a{display: inline-block; vertical-align: middle;margin:0;padding:0;font-size:0.9rem;line-height:1.2rem;text-align:center;}#ws-responsive-container p span{font-weight:600;}#ws-responsive-container p a, #ws-responsive-container p a:visited{color:#00667e;}#ws-responsive-container p a:hover,#ws-responsive-container p a:active{color:#79b0ac;}.owl-controls.clickable{position: absolute;top:50%;margin-top:-18px;left: 0;display: block;width: 100%;}.owl-prev, .owl-next{position: absolute;top: 0;background-color: #f2f2f2; padding: 0 0.5rem;}.owl-prev{left: 0;}.owl-next{right: 0;}</style><script type=&quot;text/javascript&quot; src=&quot;owl-carousel.js&quot;></script><script type=&quot;text/javascript&quot;>$(document).ready(function(){$('#message-slider').owlCarousel({navigation : true, navigationText: ['<','>'], slideSpeed : 300, pagination: true, paginationSpeed : 400, items : 1, itemsDesktop : [940, 1], itemsTablet: [940, 1], itemsMobile : [550, 1]});});</script><div id=&quot;ws-responsive-container&quot;><div class=&quot;section&quot;><div class=&quot;container u-full-width&quot;> <div class=&quot;row&quot;> <div class=&quot;columns twelve owl-carousel owl-theme&quot; id=&quot;message-slider&quot;> <div class=&quot;item&quot;> <p>message one</a></p></div><div class=&quot;item&quot;> <p>message two</p></div><div class=&quot;item&quot;> <p>message three</p></div><div class=&quot;item&quot;> <p>message four</p></div></div></div></div></div></div>");

Please could someone advise?

Cheers,

Andrew

It seems to work of you escape the closing script tags in that section.

e.g.
<\/script>
However I’m not sure if that is the correct answer.

To be safe you would be better taking the original raw html and just pasting it into a converter and avoid any issues.:slight_smile: Just build a sting variable to add into your js.

Hi Paul,

Great, thanks for letting me know!
The converter is a really useful tool generally.

Note that I wouldn’t normally use JS to prepend such a large amount of HTML but I’m currently working with an MVT tool which only allows amendments via JS. I assume that using pre-pending references to other files is acceptable in this context but wouldn’t normally be?

Cheers,

Andrew

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.