在函数内包含变量赋值？

问题描述：

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

有人能解释为什么我的第一个方法并不允许第二格是点击按钮后插入？

答

在第一个示例中，您创建了一个元素，因为您在该函数之外定义了它。函数第一次被调用时，该元素被附加到DOM并且不会再被追加（它实际上被移除并再次追加，但在相同的地方）：

如果节点已经存在它将从当前父节点中删除，然后将其添加到新的父节点。

请参阅appendChild关于MDN。

第二个示例创建一个新元素每调用一次您调用该函数，并将该新元素附加到DOM。

答

当然！如果将该元素保留在该函数之外，则只会创建一个新的div，并且您一遍又一遍地插入相同的div。当一个div被插入到一个新的位置时，它会从它的旧位置（如果有的话）中被移除。

你的第二个方法是每次单击按钮时创建新的div。

答

因为您只创建一个div一次，然后单击按钮时插入它。你永远不会创建第二个div，那么你怎么能期望一个神奇地出现在哪里？

第二个函数可以工作，因为它在您点击按钮时创建了div，然后插入它。在这里您为每次点击创建一个div，因此它可以工作。

答

在您的第一种方法中，您声明的函数以外的变量在触发点击之前创建，因此它们将总是以相同的状态存在，与您点击的内容无关。

答

第一种方法只创建一次div并将其插入到DOM中。再次调用函数不会再像第二种方法那样创建div。你可以采取：

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

虽然。

答

脚本在语法上是正确的，并执行你所要做的事情。您将相同的节点插入相同的位置，导致...无。

尝试克隆节点：

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

在函数内包含变量赋值？

相关推荐