如何在div中触发javascript时将整个div复制到另一个div

Question

我有两列.人们必须从第一列中选​​择元素,然后将其添加到第二列.

我可以使用innerHTML,但我不知道会有多少元素.因此,当我单击链接'MOVE'时,我必须知道元素的ID(在示例中为element1,element2或element3).有人知道我如何获得javascript触发的父div的父级吗？

像这样:

<div id="column1">
  <div id="element1">random tekst 1
      <div id="right">
          <a href="#" onclick="copy()">MOVE</a>
      </div>
  </div>
  <div id="element2">random tekst 2
      <div id="right">
          <a href="#" onclick="copy()">MOVE</a>
      </div>
  </div>
  <div id="element3">random tekst 3
      <div id="right">
          <a href="#" onclick="copy()">MOVE</a>
      </div>
  </div>
</div>

<div id="column2">

</div>

Answer 1

您可以将anchor元素的引用传递给function copy和use parentNode属性以获取直接父级.

<a href="#" onclick="copy(this)">MOVE</a>

function copy(elem)
{
    alert(elem.parentNode.parentNode)
}

请参阅parentNode

您的完整复制功能将是

    function copy(elem)
    {
        var target = document.getElementById ( "column2");
        target.appendChild ( elem.parentNode.parentNode );
    }

工作演示

注意

您的HTML也存在问题.您有多个具有相同ID的元素.这是无效的.您有多个具有相同ID"右"的div元素.将这些更改为唯一ID.