javascript - jquery - adding new content to page using onclick and .before -
i new jquery, starting head around ( think). have toggle ul (new restaurant) works button, when click on ul button want button create new toggle above pre-existing new restaurant button.
for example before
after
i trying work out on own, little guidance please.currently nothing happening, seen below:
script below:
$(document).ready(function(){ $('li#order_open').click(function(){ var $newrestaurant = $('<li id="order_open">new restaurant <a href="menu.php";></a></li>'); $('li').before($newrestaurant); }); <!--restaurant toggle--> <a id="restt" class ="header"href="#" onclick="togglevisibility('rest');"><h3 id="open">your restaurants</h3></a> <div id="rest" style="display: none;"><div> <ul class="tabs"> <!-- <li id="order" class="rred"><a href="franchise-account-orders.php">restaurant</a></li>--> <li id="order_open" class="rgreen"><a href="javascript:void(0);">new restaurant</a></li> </ul> i have tried:
$(document).ready(function(){ $('li#order').click(function(){ $('li#order').before('<li id="order">new restaurant <a href="menu.php";></a></li>'); }); <a id="restt" class ="header"href="#" onclick="togglevisibility('rest');"><h3 id="open">your restaurants</h3></a> <div id="rest" style="display: none;"><div> <ul class="tabs"> <!-- <li id="order" class="rred"><a href="franchise-account-orders.php">restaurant</a></li>--> <li id="order_open" class="rgreen"><a href="javascript:void(0);">new restaurant</a></li> </ul>
i hope, understand question right. can add before element in way:
$(document).ready(function(){ $('#order_open').click(function(){ //html want add var $newrestaurant = '<li id="order_open">new restaurant<a href="menu.php";></a></li>'; //insert before clicked button $(this).before($newrestaurant); }); }); i've made fiddle you: http://jsfiddle.net/6o593keg/
if want event handler on inserted button have add new event handler after you've inserted new element:
$(this).click(...) 


Comments
Post a Comment