How to switch an image from one part to another

Question

I have two col-md-6 bootstrap columns

I want in a column class="col-md-6 one" to display the content and in another ( class="col-md-6 two" ) only images.

But currently all content both text and images are in class="col-md-6 one" .

The class of all images in the class="col-md-6 one" are:

class="alignnone size-medium wp-image-520"

With jQuery, how is it possible to "crop" the images from the class="col-md-6 one" and "paste" it into the class="col-md-6 two" ?

What jQuery functions can I use for this?

Answer 1

You can use the following with jQuery:

function moveElement(element, targetElement) {
  var $el = $(element)
  var $clonedEl = $el.clone()
  $el.remove()
  $(targetElement).append($clonedEl)
}

or in vanilla JavaScript:

function moveElement(element, targetElement) {
  var el = document.querySelector(element)
  var clonedEl = el.cloneNode(true)
  el.parent.removeChild(el)
  document.querySelector(targetElement).appendChild(clonedEl)
}

or use jQuery 's .appendTo() (Thanks to @Roamer-1888)

$(function() { $('.size-medium').appendTo('.two'); });

Answer 2

if flexbox is not a problem for you order: X could solve your question without js. if youre interested i can detail it.