@kat-vetal

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

Добрый день. Помогите разобраться
У меня выводится вот такой код
<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');
  • Вопрос задан
  • 2610 просмотров
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 1
@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)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы