Javascript 动态移动 IMG 元素

Question

在某些内容之间动态移动 img 元素时遇到问题。

之前:

    <img id="moveme" class="product__image lazyload-fade lazyautosizes lazyloaded"src="https://cdn.shopify.com/s/files/1/2997/4910/files/blackjacket_overlay.png?9630" style="
    position: absolute;
">
<div class="slick-slide" data-slick-index="0" aria-hidden="true" role="tabpanel" id="slick-slide10" style="width: 447px;" tabindex="-1" aria-describedby="slick-slide-control10"><div><a class="fancybox" href="" tabindex="-1" style="width: 100%; display: inline-block;"></div>

  <div class="slick-slide slick-current slick-active" data-slick-index="1" aria-hidden="false" role="tabpanel" id="slick-slide11" style="width: 447px;" aria-describedby="slick-slide-control11"><div><a class="fancybox" href="https://cdn.shopify.com/s/files/1/2997/4910/files/blackjacket_overlay.png?9630" tabindex="0" style="width: 100%; display: inline-block;">
        <div class="product-main-image selected" data-image-id="12046975205420" style="position: absolute; overflow: hidden; display: block;">
            <img id="3971000074284" class="product__image lazyload-fade lazyautosizes lazyloaded" >
    </div>

之后:

<div class="slick-slide" data-slick-index="0" aria-hidden="true" role="tabpanel" id="slick-slide10" style="width: 447px;" tabindex="-1" aria-describedby="slick-slide-control10"><div><a class="fancybox" href="" tabindex="-1" style="width: 100%; display: inline-block;"></div>

  <div class="slick-slide slick-current slick-active" data-slick-index="1" aria-hidden="false" role="tabpanel" id="slick-slide11" style="width: 447px;" aria-describedby="slick-slide-control11"><div><a class="fancybox" href="https://cdn.shopify.com/s/files/1/2997/4910/files/blackjacket_overlay.png?9630" tabindex="0" style="width: 100%; display: inline-block;">
        <div class="product-main-image selected" data-image-id="12046975205420" style="position: absolute; overflow: hidden; display: block;">
          <!-- I WANT TO DYNAMICALLY PUT THE FOLLOWING ONE IMG ELEMENT HERE USING JAVASCRIPT -->
    <img id="moveme" class="product__image lazyload-fade lazyautosizes lazyloaded"src="https://cdn.shopify.com/s/files/1/2997/4910/files/blackjacket_overlay.png?9630" style="
    position: absolute;
">
            <img id="3971000074284" class="product__image lazyload-fade lazyautosizes lazyloaded" >
    </div>

Answer 1

使用 insertBefore https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore

您可以使用 createElement 创建新图像，使用 setAttribute 添加属性，这就是您的新节点

const newImage = document.createElement('img');
newImage.className = 'product__image lazyload-fade lazyautosizes lazyloaded';
newImage.setAttribute('id', 'moveme');
newImage.setAttribute('src', 'https://cdn.shopify.com/s/files/1/2997/4910/files/blackjacket_overlay.png?9630');
newImage.style.position = 'absolute';
const parent = document.querySelector('div[data-image-id="12046975205420"]');
const refNode = document.querySelector('#3971000074284');
parent.insertBefore(newImage, refNode);

选择已有的图像，即引用节点，然后 选择容器div，即父节点

parentNode.insertBefore(newNode, referenceNode)