jQuery .insertAfter not working, trying to move element in DOM

Question

I have tried the following jQuery code to move a <select> element ( that I can only see within the DOM ) after a <form> element but it does not work:

<script type="text/javascript">
jQuery('[id^=lc_currency]').insertAfter('[id^=lc_change]');
</script>

I have also tried:

<script type="text/javascript">
jQuery('select[id^=lc_currency]').insertAfter('form[id^=lc_change]');
</script>

Any coding suggestions? I am using a wildcard selector because on every page the ID changes, 1c_currency1, 1c_currency2, etc.

Live site is at http://thehungrygeek.com/2015/11/17/australia-dairy-company/

I want to move specifically a select dropdown box, from one place to another on a webpage. Unfortunately the element code is only located in the DOM.

This select dropdown box is located at the bottom of the page at http://thehungrygeek.com/2015/11/17/australia-dairy-company/

The code, only located in the DOM, is as follows:

<select style="width:200px" name="lc_currency1" id="lc_currency1" onchange="localCurrencyChange('SGD',lcValues1,1)">...</select>

The select dropdown box is supposed to be moved here:

The relevant code at the area is as follows:

<form name="lc_change1" id="lc_change1" action="http://thehungrygeek.com/2015/11/17/australia-dairy-company/" method="post"> 
Show currencies in
<noscript>[Please enable JavaScript to change the currency used on this page]</noscript> 
<br>
<small>Powered by LocalCurrency. Rates from <a href="http://finance.yahoo.com" title="Visit Yahoo! Finance" target="_blank">Yahoo! Finance</a></small>
</form>

Thanks for any help!

Answer 1

1st: Be sure you include jquery

2nd: Wrap your code in

$(document).ready(function(){
    // your code here   
});

3rd: Try to use .each()

$(document).ready(function(){
     jQuery('select[id^=lc_currency]').each(function(){
          var getformId = $(this).attr('id').replace('currency','change');
          //alert(getformId);
          $(this).insertAfter('form#'+ getformId);
     });
 });

Working Demo

Answer 2

I guess your id strings should be inside quote , Try this

$(function(){
    jQuery("select[id^='lc_currency']").insertAfter("form[id^='lc_change']");
});

Edit:

Try to move the select element after 1 sec after window load. this might works for you as your select element coming from javascript code.

$(window).load(function(){
   setTimeout(function(){    
      jQuery("form[id^='lc_change']").prepend( "select[id^='lc_currency']");
   },1000);
});

Answer 3

从添加的屏幕截图看来，您似乎想在表单内而不是之后插入选择，这就是我使用的方法：

jQuery('[id^=lc_currency]').insertAfter('[id^=lc_change] noscript');