Как обернуть элементы на чистом javascript?

Question

[Виталий]

Добрый день. Помогите разобраться
У меня выводится вот такой код

<div class="product-item-wrap button-has-tooltip post-386 product type-product status-publish has-post-thumbnail product_cat-chair product_tag-chair first instock shipping-taxable purchasable product-type-simple">
        <div class="product-item-inner">
            <div class="product-thumb image-products">
                <div class="product-flash-wrap"></div>
                <img src="" alt="">
               <img src="" alt="">
<a class="product-link" href="#"></a>
            </div>
            <div class="product-info">
                <a href="#">
                    <h3 class="title_plate"><?=$title->value('title')?></h3>
                </a>
            </div>
        </div>
</div>

Как мне на чистом javascript без использования jquery обернуть img в div?
Я создал элементы, добавил им классы, но вот обернуть не получается никак.

var div_first_image = document.createElement('div');
    var div_last_image = document.createElement('div');
    div_first_image.className = 'product-thumb-primary';
    div_last_image.className = 'product-thumb-secondary';
    var first_img = document.querySelectorAll('.image-products img:first-child');
    var second_img = document.querySelectorAll('.image-products img:last-child');

Answer 1

[Александр Лысенко]

По аналогиии

Comments

[Виталий]

Спасибо, но он работает не правильно, он не оборачивает то что надо https://jsfiddle.net/k28vvhft/1/

[Александр Лысенко]

Виталий: А у меня сработало, правда я на коленке подправил и кое-что лишнее в скрипте осталось

[Виталий]

AlexanderZe: да, но вы обворачиваете сразу 2 img в один div, А необходимо первое изображение обвернуть в див с одним классом а второе изображение обвернуть дивом с другим классом

[Александр Лысенко]

Виталий: так бы и написали ) проще бы было )
На коленке но суть вы поймете

Answer 2

[toly19]

Возможно, есть метод и получше, но я придумал вот это:

.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)

Comments

[Negwereth]

removeChild не нужен, при appendChild элемент не копируется, а перемещается в новую ноду.

[Виталий]

Спасибо, но этот вариант хорош если в image-products кроме 2 картинок ничего нет, а если там появляются элементы то все выводится только одна картинка и не обернута в див