在原始後插入克隆

我試圖在原始元素後面放置一個克隆元素。在原始後插入克隆

我做了一些研究，發現瞭如何創建一個克隆以及如何將克隆放置在原始文件之後，但似乎無法將它們放在一起。

這裏是我的代碼：

<html> 

<head> 

<script type="text/javascript"> 

function onClickAdd() { 

    var tableRow = document.getElementById("tableRow"); 
    var tableRowClone = tableRow.cloneNode(true); 
    document.getElementById("tableRow").insertBefore(tableRowClone, tableRow.nextSibling); 
} 

</script> 
</head> 
<body>  
    <table> 
     <tr id="tableRow"> 
      <td> 
       <input type="text" name="textField"> 
      </td> 
     </tr> 

     <tr> 
      <td> 
       <input type="button" name="addButton" value="Add" onClick="Javascript:onClickAdd()"> 
      </td> 
     </tr> 
    </table> 
</body> 

</html>

我的預期輸出是：一在Add按鈕每次點擊，一個新的文本輸入框將被放置在文本字段的堆的底部。該按鈕不是堆棧的一部分，應始終在堆棧下方。

我是JavaScript的總noobot。上面的代碼可能不正確。謝謝！

來源

2012-06-20 paperclip

關閉。 :-)你把它叫做父節點（也沒有必要去看看它第二次）上：

function onClickAdd() { 

    var tableRow = document.getElementById("tableRow"); 
    var tableRowClone = tableRow.cloneNode(true); 
    tableRow.parentNode.insertBefore(tableRowClone, tableRow.nextSibling); 
// ^^^^^^^^^^^^^^^^^^^--- changes here 
}

當然，上面創建一個無效的DOM結構，因爲你最終兩個行與id值相同（"tableRow"）和id值必須在文檔中是唯一的。所以：

function onClickAdd() { 

    var tableRow = document.getElementById("tableRow"); 
    var tableRowClone = tableRow.cloneNode(true); 
    // Clear the `id` from the clone 
    tableRowClone.id = ""; // To clear it, or include something to give it its own 
    tableRow.parentNode.insertBefore(tableRowClone, tableRow.nextSibling); 
// ^^^^^^^^^^^^^^^^^^^--- changes here 
}

來源

2012-06-20 10:26:53

優秀。感謝您及時的回覆！ – paperclip

只需閱讀您的編輯。你剛回答我的下一個問題。再次感謝！ – paperclip

@paperclip：大聲笑，無後顧之憂，很高興幫助！ –

你必須父元素上使用insertBefore：

tableRow.parentNode.insertBefore(tableRowClone, tableRow.nextSibling);

而且不要忘記改變id。 ID必須是唯一的。
而且，在內聯事件中，Javascript:已過時。它不會導致任何錯誤，因爲它被解釋爲標籤。

來源

2012-06-20 10:26:03

我應該用什麼來代替Javascript：？ – paperclip

@paperclip沒什麼。它已經過時了，這意味着你的代碼在移除時運行良好。 '<... onClick =「onClickAdd（）;」>'。紅利注意：JavaScript區分大小寫，而HTML不區分大小寫。因此，'onClickAdd'只能以一種方式拼寫，但'onClick'也可以拼寫爲其他大寫字母，例如'onclick'。 –

這是很好的知道。感謝Rob。 – paperclip

function onClickAdd() { 
    var tableRow = document.getElementById("tableRow"); 
    var tableRowClone = tableRow.cloneNode(true); 
    tableRow.parentNode.insertBefore(tableRowClone, tableRow.nextSibling); 
}

而且demo。

來源

2012-06-20 10:28:59 xdazz

感謝您的鏈接。很酷的東西。 – paperclip

在原始後插入克隆

回答

相關問題