使用 Javascript/jQuery 插入带有类的 HTML答案

【问题标题】：Insert HTML with classes with Javascript/jQuery使用 Javascript/jQuery 插入带有类的 HTML
【发布时间】：2015-07-28 12:17:27
【问题描述】：

我正在尝试使用 javascript 插入包含元素的整个块。我需要将它们放在具有类 box-group 的 div 元素之前。我看到问题是“”。我怎样才能一次插入这个。

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

我正在尝试使用 VWO 进行 A/B 测试。

（我无法使用普通编辑器放置内容，因为测试运行的每个页面的 DOM 结构都不同。）

【问题讨论】：

您需要使用 \ 对其进行转义或使用单引号 ' 来包装您的字符串：请参阅 stackoverflow.com/questions/7618214/…
' 和 " 在 javascript 中几乎可以互换，在任何您“引用字符串”的地方，您也可以“引用字符串”，或者 <div class="upper"> 可以是 <div class='upper'> - 有两个字符串分隔符，这应该足够了（直到你开始生成在 php 中生成 html 的 javascript - 然后它是一个转义引用的噩梦！！

标签： javascript html dom ab-testing vwo

【解决方案1】：

我用单引号代替了双引号。

试试这个

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

【讨论】：

【解决方案2】：

如果你想在你的例子中插入 html，你必须先用\ 转义所有的"，所以它变成\"。

用你自己的例子，应该是<div class=\"box\">(...)</div>

【讨论】：