2014-02-16 102 views
0

我试图创建一个函数,当onclick发生时,它会复制javascript中的html中的所选(按类名称)dom元素。在javascript中复制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> 
+1

变种原始= document.getElementsByClassName( '的listItem')[0]; – sinisake

回答

1

很多元素可以有类,因此函数返回一个列表。

document.getElementByClassName('listItem'); 

应该是:

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

而且元素没有class属性,它是如此.className

clone.class = "listItem"; 

应该

clone.className = "listItem"; 

试图寻找更多的我在你进入到stackoverflow之前,在互联网上。看来你跳过一些JavaScript教训(:P)

0

去与此到底

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