Question

我需要更改图片的位置（放置1 img 2 img在哪里，反之亦然），为此我试图cloneNode第二个img，但实际上它只需带上[object 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