Question

我需要更改图片的位置（将1 img放在2 img的位置，反之亦然），为此我试图克隆第二个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>

JS：

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

cloneNode方法不起作用

3 个答案: