Below is my html:
<div class="row">
<div class="col-lg-11">
<ul class="list-unstyled" id="slider">
</ul>
</div>
</div>
Below is my javascript:
var locationbegin="<div class='form-group'><label>Location</label><select
class='form-control' id='location'><option>test</option>";
$("#slider").append(locationbegin);
var locationoptions = "<option>tester</option>";
$("#slider").append(locationoptions);
var locationend="</select> </div>";
$("#slider").append(locationend);
Below is the output:
The problem is the tester comes out of the location dropdown. I'm not sure where i'm going wrong. You can also use http://rendera.herokuapp.com/ to render the code.
Edit: The reason the javascript is separated is because of some other javascript code in between in the code.