cloneNode方法不工作

Question

我需要更改图片位置(将1 img放在2 img所在的位置，反之亦然)，为此，我尝试cloneNode第二个img，但它只是给我带来了对象HTMLImageElement，尽管它在console.log中显示了正确的html元素。我的密码怎么了？

<div id="imgs">
<div id="img1">
<img src='../img/slide_1.jpg' class='slides-adm' id='teste1' onmousemove='drag(this);' />
</div>
<div id="img2">
<img src='../img/slide_2.jpg' class='slides-adm' id='teste2' onmousemove='drag(this);' />
</div>
</div>

联署材料：

var id = obj.getAttribute('id');
    //console.log(id);

var img = document.getElementById(id);

    img.ondragstart = function(){
        return false;
    };

    function dropImage(e){
        img.removeAttribute('style');

        if(id == 'teste1'){
            img.style.top = e.clientY -300 + 'px';
            img.style.left = e.clientX -290 + 'px';
        }else if(id == 'teste2'){
            img.style.top = e.clientY -300 + 'px';
            img.style.left = e.clientX -540 + 'px';
        }else{
            img.style.top = e.clientY -300 + 'px';
            img.style.left = e.clientX -800 + 'px';
        }

        //console.log(img.style.left);
        if(img.style.left >= '230px' && img.style.left <= '250px'){
            var imgs = document.querySelector("#imgs").children;
            var imgId = document.querySelector("#img1");
            var imgCp = document.querySelector("#teste2");
            //here is my clone
            imgId.innerHTML = imgCp.cloneNode();

        }
    }

    function drop(e){
        dropImage(e);
        document.removeEventListener('mousemove' ,dropImage);
        document.removeEventListener('mouseup', drop);

            img.style.transition = 'all 500ms ease-in';
            img.style.left = '0px';
            img.style.top = '0px';
            imgs.removeAttribute('onmousemove');
    }

    img.addEventListener('mousedown', function(){
        document.addEventListener('mousemove', dropImage);
        document.addEventListener('mouseup', drop);
    });

}

Answer 1

使用imgCp.cloneNode().outerHTML或imgCp.cloneNode().innerHTML获取实际的html作为字符串。

Answer 2

您将HTMLElement分配给innerHTML属性(它是字符串，所以您将得到[HTMLImageElement])。您应该将它与imgId.appendChild(imgCp.cloneNode())放在一起。

Answer 3

cloneNode如其名称所示，在新DOM元素中克隆节点，您要做的是用克隆的元素设置元素的innetHTML属性.

我要做的是：

var imgId = document.querySelector("#img1");
var imgCp = document.querySelector("#teste2");

var txtCP = imgCP.innerHTML;

imgId.innerHTML = txtCP;

您可以在这里查看文档：https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode