Question

我正在尝试创建一个函数，当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>

Answer 1

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

document.getElementByClassName('listItem');

应该是：

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

此外，元素没有class属性，因此.className

clone.class = "listItem";

应该是

clone.className = "listItem";

尝试在进入stackoverflow之前在互联网上搜索更多内容。似乎你跳过了一些javascript课程（：P）

Answer 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>

在javascript中复制dom元素

2 个答案: