Swap div content onclick с AJAX

Question

Я просто хочу поменять содержимое двух разделов при нажатии кнопки с помощью AJAX.

Я сделал простой jsfiddle, чтобы продемонстрировать, что я имею в виду. Итак, я хочу поменять местами A с B и B с помощью A одновременно (в то время как красный и зеленый ящик остается на том же месте), используя onclick.

.box1 { 
 
    border: 2px solid green ; 
 
} 
 

 
.box2 { 
 
    border: 2px solid red ; 
 
}

<div id="rank1" class="box1"> 
 
    B 
 
</div> 
 
    
 
<div id="rank2" class="box2"> 
 
    A 
 
</div>

Answer 1

использовать JQuery, чтобы сделать это

включают JQuery JS в HTML тег головки

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 

и следующий сценарий, чтобы изменить содержание

<script> 
    $(document).ready(function(){ 
    $('#sbutton').click(function() { 
     var div1_value = $("#rank1").html(); 
     var div2_value = $("#rank2").html(); 
     $("#rank1").html(div2_value); 
     $("#rank2").html(div1_value) 
    }); 
    }); 
</script> 

добавить кнопку в вашем HTML тела

<input type="button" id="sbutton" value="Change"/>