DOM脚本Javascript，设置元素值

Question

I am aiming to add a button to the screen through the click of another button. I can successfully add them but they are blank (ie, No text).

I tried setting the value with this technique:

addButton.setAttribute("value", "Click Me");

This failed, the strange thing is I was able to successfully set the elements ID with the setAttribute function.

I then tried the following:

var x = document.getElementById("buttonId");
x.value="Click Me";

The above caused the button not to add at all.

Maybe I'm missing something but I can't think why the first method wouldn't work.

Note: These buttons are all created on the fly so the standard:

<input type="button" value="click me"/>

won't suffice.

Any help appreciated.

Answer 1

function addButton(elementId, value, name, type) {
    //Create an input type dynamically.   
    var element = document.createElement("input");
    //Assign different attributes to the element. 
    element.type = type;
    element.value = value; // Really? You want the default value to be the type string?
    element.name = name;  // And the name too?

    var foo = document.getElementById(elementId);
    //Append the element in page (in span).  
    foo.appendChild(element);
}

Try this.

Example fiddle: http://jsfiddle.net/kailashyadav/4Q8Fd/

Answer 2

Here is the code for a button, associated jsfiddle :

$('#createButton').on('click', function () {
    var button = document.createElement('button');
    button.innerHTML = 'hello';
    button.setAttribute('type', 'button');
    $('#placeForButton').html(button);
});

Note I set the innerHTML, because an input relies on a value attribute, a button relies on an open and closing HTML attribute. Therefore, the value in between the tags is what sets the button text. This translates into innerHTML .

I only used JQuery to bind an event to the button click.