我不明白 javascript 中的创建元素 function

Question

Suppose I write following JavaScript code:-

//Line1

document.createElement("button");

//Line2
document.createElement("button").onclick="func();

Now question is what will happen next Scenario 1:- JavaScript will create two buttons. Scenario 2:- JavaScript will create 1 button with onclick attribute. If scenario 2 is true how JavaScript created attribute in 2nd line without calling getelement function.means how JavaScript was knowing that I am still working on previous button and not asking to create a new button.

I am a beginner and this is my first time posting question so forgive for mistakes.

Answer 1

The createElement function creates a new element and returns it.

So here you will create 2 different buttons (one for each time you called the function).

You can see that the second time you are calling createElement, it is not the same as the first one. You can test that like this to make sure:

a = document.createElement("button")
b = document.createElement("button")
a == b // false

This will return false because they are different.

So as a and b are both elements created, you can call

a.onclick = function() {}
// or
b.onclick = function() {}

Answer 2

Both the lines when executed, creates two different elements and returns them. Note that they are not yet added to the DOM and since the returned elements are not captured in any variable, they can't be added to DOM later.

Here's the correct way of creating and adding a button in the DOM:

 var button = document.createElement('button'); button.innerText = "Button1"; button.onclick = handler; document.getElementById('parent').appendChild(button);