在函數內包含變量賦值？

<button onclick="insert()">Click to insert</button> 
    <hr id="start"> 
    <hr id="end">

我寫了一個JavaScript函數，插入兩個水平之間的規則一個div：在函數內包含變量賦值？

<script type="text/javascript">  
    var element = document.createElement("div"); 
    var element_content = document.createTextNode("This is a newly added row!"); 
    element.appendChild(element_content); 

    var sibling = document.getElementById("end")  
    var parent = document.getElementById("start").parentNode; 

    function insert(){ 
     parent.insertBefore(element,sibling);   
    } 
</script>

然而，當我按一下按鈕第二次，沒有div的插入。我必須包括以點擊按鈕的第二次所有函數內部的變量賦值都在div插入：

<script type="text/javascript"> 
    function insert(){  
    var element = document.createElement("div"); 
    var element_content = document.createTextNode("This is a newly added row!"); 
    element.appendChild(element_content); 

    var sibling = document.getElementById("end")  
    var parent = document.getElementById("start").parentNode; 

     parent.insertBefore(element,sibling);   
    } 
</script>

有人能解釋爲什麼我的第一個方法並不允許第二格是點擊按鈕後插入？

來源

2012-02-02 user784637

在第一個示例中，您創建了一個元素，因爲您在該函數之外定義了它。函數第一次被調用時，該元素被附加到DOM並且不會再被追加（它實際上被移除並再次追加，但在相同的地方）：

如果節點已經存在它將從當前父節點中刪除，然後將其添加到新的父節點。

請參閱appendChild關於MDN。

第二個示例創建一個新元素每調用一次您調用該函數，並將該新元素附加到DOM。

來源

2012-02-02 23:28:22

當然！如果將該元素保留在該函數之外，則只會創建一個新的div，並且您一遍又一遍地插入相同的div。當一個div被插入到一個新的位置時，它會從它的舊位置（如果有的話）中被移除。

你的第二個方法是每次單擊按鈕時創建新的div。

來源

2012-02-02 23:28:42 caleb

因爲您只創建一個div一次，然後單擊按鈕時插入它。你永遠不會創建第二個div，那麼你怎麼能期望一個神奇地出現在哪裏？

第二個函數可以工作，因爲它在您點擊按鈕時創建了div，然後插入它。在這裏您爲每次點擊創建一個div，因此它可以工作。

來源

2012-02-02 23:29:31

在您的第一種方法中，您聲明的函數以外的變量在觸發點擊之前創建，因此它們將總是以相同的狀態存在，與您點擊的內容無關。

來源

2012-02-02 23:29:37

第一種方法只創建一次div並將其插入到DOM中。再次調用函數不會再像第二種方法那樣創建div。你可以採取：

var sibling = document.getElementById("end")  
var parent = document.getElementById("start").parentNode;

雖然。

來源

2012-02-02 23:31:13 j08691

腳本在語法上是正確的，並執行你所要做的事情。您將相同的節點插入相同的位置，導致...無。

嘗試克隆節點：

function insert(){ 
    parent.insertBefore(element.cloneNode(true), sibling);   
}

來源

2012-02-02 23:32:30 user123444555621

在函數內包含變量賦值？

回答

相關問題