jquery - Difficulty with integrating with given css -


a css has been provided me ,i trying integrtae put code in css .

this css

<div data-role="collapsible">     <h3>popcorn</h3>     <div class="prd-items-detials">         <ul>             <li class="head">                 <form>                     <input type="checkbox" name="checkbox-mini-0" id="checkbox-mini-0" data-mini="true">                     <label for="checkbox-mini-0">small pack 150g</label>                 </form>             </li>             <li class="prd-items-qt">                 <div class="col">                     <i class="minus"></i>                     <i class="qt">12</i>                     <i class="plus"></i>                 </div>                 <div class="col">                  </div>                 <div class="col">                     rs: 150/-                 </div>             </li>         </ul>      </div> </div> 

this image how looking .

enter image description here

i tried achive same using

activateuihtml.append('<div data-role="collapsible">'); activateuihtml.append('<div>popcorn</div>'); activateuihtml.append('<div class="prd-items-detials">'); activateuihtml.append('<ul>'); activateuihtml.append('<li class="head">'); activateuihtml.append('<form>'); activateuihtml.append('<input type="checkbox" name="popcorn" id="popcorn" data-mini="true">'); activateuihtml.append('<label for="checkbox-mini-0">popcorn</label>'); activateuihtml.append('</form>'); activateuihtml.append('</li>'); activateuihtml.append('<li class="prd-items-qt">'); activateuihtml.append('<div class="col">'); activateuihtml.append('<i class="minus"></i>'); activateuihtml.append('<i class="qt">12</i>'); activateuihtml.append('<i class="plus"></i>'); activateuihtml.append('</div>'); activateuihtml.append('<div class="col">150</div>'); activateuihtml.append('</li>'); activateuihtml.append('</ul>'); activateuihtml.append('</div>'); activateuihtml.append('</div>'); activateuihtml.append(activateuihtml) ; 

but appears way

enter image description here

could please let me know how build dynamically ??

when append single <div> browser closes automatically breaks html.

if want it, create this:

activateuihtml.append('<div data-role="collapsible"><h3>popcorn</h3><div class="prd-items-detials"><ul><li class="head"><form><input type="checkbox" name="checkbox-mini-0" id="checkbox-mini-0" data-mini="true"><label for="checkbox-mini-0">small pack 150g</label></form></li><li class="prd-items-qt"><div class="col"><i class="minus"></i><i class="qt">12</i><i class="plus"></i></div><div class="col"></div><div class="col">rs: 150/-</div></li></ul></div></div>'); 

you should think using templates (ex. fiddle)


Comments

Popular posts from this blog

c++ - OpenCV Error: Assertion failed <scn == 3 ::scn == 4> in unknown function, -

php - render data via PDO::FETCH_FUNC vs loop -

The canvas has been tainted by cross-origin data in chrome only -