Here’s how to dynamically append a new data using input field.

HTML

<form id="create_menu_item">
 <h4>Add Menu Item</h4>
 <div>
   <input id="new_menu_name" type="text" name="new_menu_name" placeholder="Please enter your menu title" />
   <input class="add_menu_item" name="add_menu_item" value="Add" type="button" />
 </div>
 <h4>Menu Items</h4>
 <div id="created_buttons">
   <ol id="created_buttons_list"> </ol>
 </div>
</form>

JS

$(".add_menu_item").click((function() {
 var id = 0;
 return function() {
   var value = $(this).prev().val();
   if (value.length) {
     var newDiv = $('<div id="toggleshow" class="div_menu_button"></div>');
     $('#created_buttons_list').append(newDiv.val(value).text(value));
     newDiv.wrap("<li></li>");
     newDiv.after(showDiv);
     id++;
   }
 }
})());

No Comments

Cancel