Возможно, есть метод и получше, но я придумал вот это:
.image-products>div {
border: 1px solid red;
margin-top: 10px;
}
<div class="image-products">
<img src="http://www.cscl.ru/images/articles/logo-cs-1-6.jpg">
<img src="http://www.cscl.ru/images/articles/logo-cs-1-6.jpg">
</div>
let div_first_image = document.createElement('div');
let div_last_image = document.createElement('div');
div_first_image.className = 'product-thumb-primary';
div_last_image.className = 'product-thumb-secondary';
let first_img = document.querySelectorAll('.image-products img:first-child')[0];
let second_img = document.querySelectorAll('.image-products img:last-child')[0];
let parentDiv = document.querySelector(".image-products");//лучше через ID
parentDiv.removeChild(first_img);
parentDiv.removeChild(second_img);
div_first_image.appendChild(first_img);
div_last_image.appendChild(second_img);
parentDiv.appendChild(div_first_image)
parentDiv.appendChild(div_last_image)
