2015-07-28 40 views
1

我想插入一個使用javascript的元素的整個塊。我需要把它們放在一個帶有box-group的div元素之前。我看到問題是「」。我怎樣才能一次插入。用Javascript插入HTML類/ jQuery

$(".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結構是在每一頁上不同的測試運行。)

+1

需要用\逃逸,或使用單引號'''一起包裝你的字符串:看http://stackoverflow.com/questions/7618214/why 「單引號字符串首選雙引號字符串在js – Hacketo

+0

」和「幾乎在JavaScript中可以互換,任何地方」引用一個字符串「你也可以'引用一個字符串',或' div class ='upper'>''有兩個字符串分隔符,這應該足夠了(直到你開始生成在PHP中生成html的javascript - 那麼這是一個逃脫的報價噩夢! ! –

回答

1

我換成單引號雙引號。

如果你想插入HTML像你的榜樣,您必須首先逃出所有"\,因此它成爲\"試試這個

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

用自己的例子,它應該是<div class=\"box\">(...)</div>