title: DOM manipulation with JavaScript or jQuery by moving element inside of its sibling
body: <p>I have a big list of DOM elements containing product image and description.
  How can I use JavaScript or jQuery to move <code>.title</code> element inside its sibling's <code>imageWrapper</code> element ?</p>
  
  <p>I drew a diagram here, hopefully that helps with explaining the situation. </p>
  
  <p>Here is what I have so far:</p>
  
  <pre><code>var $titleArray = $('.title');
  
  for (var i = 0 ; i &lt; $titleArray; i++){
      var $imageWrapper = $($titleArray[i]).parent().prev();
      $($titleArray[i]).appendTo($imageWrapper);  
  };
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/CVzfm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CVzfm.jpg" alt="enter image description here"></a></p>