Вставьте HTML с классами с помощью Javascript/jQuery

Я пытаюсь вставить целый блок с элементами, используя JavaScript. Мне нужно разместить их перед элементом div с классом box-group. Я вижу, что проблема заключается в "". Как я могу вставить это сразу.

$(".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>");

HTML-код:

<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>

Я пытаюсь сделать это для A/B теста с VWO.

(Я не могу разместить содержимое в обычном редакторе, поскольку структура DOM отличается на каждой странице, на которой выполняется тест.)

Источник

2 ответа

Я заменил двойные кавычки на одинарные.

Попробуй это

$(".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>");
Источник

Если вы хотите вставить HTML, как в вашем примере, вы должны сначала экранировать все " с \так становится \",

На вашем собственном примере это должно быть <div class=\"box\">(...)</div>

Источник
Другие вопросы по тегам