1

I'm trying to understand HTML elements that are dynamically created with JavaScript. Specifically can someone explain why if I create a button in HTML with no value attribute it will appear with no text. I can then add a value to it and the text will appear in the button, and I can also alert the value like so:

var Button1 = document.getElementById("Button1");
Button1.value = "test";
alert(Button1.value);

BUT, if I generate the button dynamically and then add the value it does NOT appear on the button, although I can still alert it.

var Button1 = document.createElement("button");
var Div1 = document.getElementById("Div1");
Button1.value = "test";
Div1.appendChild(Button1);
alert(Button1.value);

In the second example, the text of the button doens't change, but the value still alerts. I KNOW that I can use createTextNode and append it to the button, but I'm trying to understand the difference between controls generated dynamically through JavaScript and those that are created in HTML.

Thank you for reading my question.

Improve this question

4 Answers 4

Reset to default
2

In your second example you're creating a new element and assigning a value to it, but you haven't added it to the DOM -- it exists purely in JavaScript which is why the alert works. In order to see the button on the page, you would need to append it to the document, typically with appendChild().

You said, "BUT, if I generate the button dynamically and then add the value it does NOT appear on the button, although I can still alert it." and "the text of the button doens't change, but the value still alerts" which confuses me a little since it seems as if you might have a button already on the page which you expect the second example's code to change.

Your first example is a textbook example of how to get an element that exists in the DOM already, assign (or change) its value, and then alert it.

Update: To answer your revised question, your code is changing the button's value, but if you expect to see the text of the button on the page change, you need to alter its innerHTML value, like with Button1.innerHTML = "test";. Button elements aren't like input buttons where the value is shown as the text of the button. The text of a button element comes from the text between the opening <button> and closing </button> tags.

Example: <button value="test">test</button>

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

hmm even with appendChild() for me it looks like no text is set: jsfiddle.net/T8x8L
yes, thank you. I need to learn to be more clear. I modified to code in the second example to add the button to a div. So in the second example the button will display, but it will display with no text, even though I have assigned a value to the "value" attribute. I can use the createTextNode method of the document object and add the text node to the button, and that works. But I am trying to understand why I can't just simply modify the value attribute as I could with a button that were created in HTML.
Thank you. I used innerHTML and got the results I wanted. Still, if I change the value propery of Button1 it changes the text in IE8, which I still don't understand, but I marked your answer anyway. Maybe it's a IE8 thing?
I believe that's just one of the many quirks of IE8 running in (wait for it) quirks mode.
While you're creating button elements, best to createTextNode and then appendChild rather than use innerHTML. Also, I believe IE defaults 'value' to the text between the button tags if no 'value' is set, so best to deliberately set 'value' when it matters.
1

In the second code snippet your Button object is not part of the DOM, hence the browser will not display it.

Improve this answer

1 Comment

yes. My apologies. I edited my question so that the second example now puts the button on the page.
0

Your second example doesn't actually put the button anywhere on the HTML page; it just exists as a variable in Javascript. So I'm not sure where you are seeing the text of the button not change - that whole button is nowhere visible. Any buttons you see on the page are not the one you just created with Javascript, until you add it to the page (usually by calling appendChild() on an element that is already on the page).

Improve this answer

1 Comment

Yes. I modified the second example to put the button the page. My apologies.
0

Because the value attribute of the button element doesnt change the text of the button,since you can put everything you want inside a button tag , like images ,etc ...:

http://jsfiddle.net/jgQGe/2/

you first code snippet doesnt work for me in Chrome for instance , i cant change the text of the button with using the value attribute.

you can set the text of a button element with myButton.innerHTML , but not with myButton.value.

Improve this answer

1 Comment

That makes sense, but in the first example, in IE 8, it changes the text of the button on the page. I wonder if that is something specific to IE, or IE8.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.