在javascript中複製dom元素

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>