1

I am trying to insert a whole block with elements using javascript. I need to place them before a a div element with the class box-group. I see the problem is the "". How can I insert this at once. 

$(".box-group").before("<div class="box"><h2>header</h2><div class="visible-desktop visible-tablet hidden-phone row-fluid"><ul class="nav nav-pills nav-stacked pull-left span6"><li><a href="#">item</a></li><li><a href="#">Item</a></li><li><a href="#">Item</a></li></ul><ul class="nav nav-pills nav-stacked pull-left span6"><li><a href="#">Item</a></li><li><a href="#">Item</a></li><li><a href="#">Item</a></li></ul></div><div class="hidden-desktop hidden-tablet visible-phone row-fluid"><ul class="nav nav-pills nav-stacked pull-left span6"><li><a href="">Item</a></li><li><a href="#">Item</a></li><li><a href="#">Item</a></li><li><a href="#">Item</a></li><li><a href="#">Item</a></li><li><a href="#">Item</a></li></ul></div><div class="clearfix"></div></div>");

The HTML code: 

<div class="box">
    <h2>header</h2>
    <div class="visible-desktop visible-tablet hidden-phone row-fluid">
    <ul class="nav nav-pills nav-stacked pull-left span6">
        <li>
            <a href="#">item</a>
        </li>
        <li>
            <a href="#">Item</a>
        </li>
        <li>
            <a href="#">Item</a>
        </li>
    </ul>
    <ul class="nav nav-pills nav-stacked pull-left span6">
        <li>
            <a href="#">Item</a>
        </li>
        <li>
            <a href="#">Item</a>
        </li>
        <li>
            <a href="#">Item</a>
        </li>
    </ul>
</div>
<div class="hidden-desktop hidden-tablet visible-phone row-fluid">
    <ul class="nav nav-pills nav-stacked pull-left span6">
        <li>
            <a href="#">Item</a>
        </li>
        <li>
            <a href="#">Item</a>
        </li>
        <li>
            <a href="#">Item</a>
        </li>
        <li>
            <a href="#">Item</a>
        </li>
        <li>
            <a href="#">Item</a>
        </li>
        <li>
            <a href="#">Item</a>
        </li>
    </ul>
   </div>
    <div class="clearfix"></div>    
</div>

I am trying to do this to for a A/B test with VWO.

(I can't place the content with the normal editor, as the DOM structure is different on every page the test runs.)

Bastiaan
  • 9
  • 3
  • 1
    you need to escape it with \ or use single quote `'` to wrap your string with : see http://stackoverflow.com/questions/7618214/why-single-quoted-string-preferred-over-double-quoted-string-in-js – Hacketo Jul 28 '15 at 12:19
  • ' and " are pretty much interchangeable in javascript, anywhere you "quote a string" you can also 'quote a string', or `
    ` can be `
    ` - there are two string delimiters, that should be enough (until you start generating javascript that generates html in php - then it's a escaped quote nightmare!!
     – Jaromanda X Jul 28 '15 at 12:26

2 Answers2

1

I replaced double quotes with single quote.

Try this 

$(".box-group").before("<div class='box'><h2>header</h2><div class='visible-desktop visible-tablet hidden-phone row-fluid'><ul class='nav nav-pills nav-stacked pull-left span6'><li><a href='#'>item</a></li><li><a href='#'>Item</a></li><li><a href='#'>Item</a></li></ul><ul class='nav nav-pills nav-stacked pull-left span6'><li><a href='#'>Item</a></li><li><a href='#'>Item</a></li><li><a href='#'>Item</a></li></ul></div><div class='hidden-desktop hidden-tablet visible-phone row-fluid'><ul class='nav nav-pills nav-stacked pull-left span6'><li><a href=''>Item</a></li><li><a href='#'>Item</a></li><li><a href='#'>Item</a></li><li><a href='#'>Item</a></li><li><a href='#'>Item</a></li><li><a href='#'>Item</a></li></ul></div><div class='clearfix'></div></div>");
Shrinivas Pai
  • 7,491
  • 4
  • 29
  • 56
0

If you want to insert html like in your example, you must first escape all the " with a \, so it becomes \".

With your own example, it should be <div class=\"box\">(...)</div>

Fizk
  • 1,015
  • 1
  • 7
  • 19