Question

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

有人可以解释为什么我的第一种方法在点击按钮后不允许插入第二个div吗？

Answer 1

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

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

请参阅MDN上的appendChild。

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

Answer 2

当然！如果将元素保留在函数外部，则只创建一个新div，并且反复插入相同的div。当div插入新位置时，它将从其旧位置（如果有）中删除。

每次单击按钮时，第二种方法都会创建新的div。

Answer 3

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

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

Answer 4

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

Answer 5

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

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

虽然没有这个功能。

Answer 6

脚本在语法上是正确的，并按照您的要求执行操作。您将相同的节点插入到相同的位置，这导致......没有。

尝试克隆节点：

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

在函数内包含变量赋值？

6 个答案: