jQuery: переместить один элемент DIV внутрь другого

Практическое упражнение jQuery. Часть — I: Упражнение 12

Переместите один элемент DIV внутрь другого с помощью jQuery.

 Переместите следующий 
 ... 
 в 
 ... 
 

Пример решения:

HTML-код:

            
   Button1   Button2    Button3  
 
 
     
  Код CSS:  
 
  #nonSelected {position: absolute;  верх: 10 пикселей;  слева: 10 пикселей;  ширина: 180 пикселей;  высота: 180 пикселей;  цвет фона: # 884333;  ширина границы: 1px;  стиль границы: пунктирная;  цвет границы: черный;  padding: 10px;} # selected {position: absolute;} # выбрано {позиция: абсолютная;  верх: 10 пикселей;  слева: 200 пикселей;  ширина: 180 пикселей;  высота: 180 пикселей;  цвет фона: # 498933;  ширина границы: 1px;  стиль границы: пунктирная;  цвет границы: черный;  padding: 10px;}  
  Код JavaScript:  
  function moveButton (elem) {  if ($ (elem) .parent (). attr ("id") == "nonSelected") {$ (elem) .detach (). appendTo ('# selected');  } еще {$ (elem) .detach (). appendTo ('# nonSelected');  }}  
 См. Pen jquery-Practical-упражнение-12 от w3resource (@ w3resource) на CodePen. 
 
  Предыдущий:  Создайте разделение с помощью jQuery с тегом стиля.  
  Далее:  выберите значения из объекта JSON с помощью jQuery.