在函数中包含变量分配？

Question

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

I wrote a javascript function that inserts a div between two horizontal rules:

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

However when I click the button for the second time, no divs are inserted. I had to include all the variable assignments inside the function in order to click on the button for the 2nd time have the div inserted:

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

Can someone explain why my first approach didn't allow a 2nd div to be inserted after clicking the button?

Answer 1

In the first example you create one element, since you define it outside of the function. The first time the function is called, that element is appended to the DOM and it won't be appended again (it actually gets removed and appended again, but in the same place):

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

See appendChild on MDN.

The second example creates a new element every time you call the function, and appends that new element to the DOM.

Answer 2

Of course! If you keep the element outside of the function, only 1 new div is created and you are inserting the same div over and over. When a div is inserted in a new location, it is removed from it's old location (if any).

Your second method creates new divs every time the button is clicked.

Answer 3

Because you're only creating a div once and then inserting it when you click the button. You never create a second div , so how can you expect one to magically appear out of nowhere?

The second function works because it creates the div when you click the button, then inserts it. Here you create one div for every click, so it works.

Answer 4

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

Answer 5

The first approach only creates the div once and inserts it in the DOM. Calling the function twice doesn't create the div again like the second method does. You could probably take the:

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

out of the function though.

Answer 6

The Script is syntactically correct and does what you tell it to do. You're inserting the same node to the same position, which results in... nothing.

Try cloning the node:

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