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