在javascript中复制dom元素答案

【问题标题】：Duplicating dom element in javascript在javascript中复制dom元素
【发布时间】：2014-03-15 14:07:25
【问题描述】：

我正在尝试创建一个函数，当 onclick 发生时，它会在 javascript 的 html 中复制一个选定的（按类名）dom 元素。

到目前为止，我有并且我正在寻找建立 listItem 的 onclick

<script type="text/javascript">
    document.getElementById("button").onclick = duplicate;
    var i = 0;
    var original = document.getElementByClassName('listItem');

    function duplicate() {
        var clone = original.cloneNode(true); // "deep" clone
        clone.class = "listItem"; // there can only be one element with an ID
        original.parentNode.appendChild(clone);
    }
</script>

<div class="listItem">
    <div class="thumb">
        <a href="#"></a>
    </div>
    <div class="description">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    <div class="btn">
        <a href="#" title="More Info">More Info</a>
    </div>
</div>

<button id="button" onclick="duplicate()">Click me</button>

【问题讨论】：

var original = document.getElementsByClassName('listItem')[0];

标签： javascript html dom clone

【解决方案1】：

许多元素可以有类，所以函数返回一个列表。

document.getElementByClassName('listItem');

应该是：

document.getElementsByClassName('listItem')[0]; //As @nevermind said first

元素也没有class属性，所以是.className

clone.class = "listItem";

应该是

clone.className = "listItem";

在使用 stackoverflow 之前，请尝试在互联网上进行更多搜索。似乎你跳过了一些 javascript 课程 (:P)

【讨论】：

【解决方案2】：

最后还是这样

<script type="text/javascript">
  function Clone () {
      var listItem = document.getElementsByClassName("listItem")[0].cloneNode(true)
      var cloneListItem = listItem.cloneNode (true);
      var list = document.getElementById ("list");
      list.appendChild (cloneListItem);
  }
</script>

【讨论】：