Insert HTML with classes with Javascript/jQuery

Question

I am trying to insert a whole block with elements using javascript. I need to place them before aa 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.)

Answer 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>");

Answer 2

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>