javascript - 在函数中包含变量赋值？

Question

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

我写了一个在两条水平线之间插入一个 div 的 javascript 函数:

<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 并且不会再次附加(它实际上被删除并再次附加，但在同一个地方):

If the node already exists it is removed from current parent node, then added to new parent node.

参见 appendChild在 MDN 上。

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