javascript - How to change position of element when onclick using jquery? -
i have 2 divs, .div_data
, .div_update
<select name=change_placement> <option value=0>top</option> <option value=1>bottom</option> </select> <div class='div_data'>data data</div> <div class='div_update'> <form name=stuff> <input type=text> </form> </div>
how .div_update
precede .div_data
when clicking on select[name=change_placement]
?
i put id select , added option 'select' dropdown select. assuming want input text box go above other div when choose 'top'.
$('#change_placement').on('change', function() { var option = $(this).val(); if(option == 0) { $('.div_update').insertbefore($('.div_data')); } else { $('.div_update').insertafter($('.div_data')); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name='change_placement' id='change_placement'> <option value=''>select</option> <option value='0'>top</option> <option value='1'>bottom</option> </select> <div class='div_data'> data data </div> <div class='div_update'> <form name=stuff> <input type=text> </form> </div>
Comments
Post a Comment