JQuery not initializing object

Question

I'm attempting to dynamically create a button using JQuery to create the button, initialize it, and insert it into the DOM. When the following code executes, an element is added into the DOM, however instead of being:

<input value="button">Click Me</input>

The item in the DOM is just:

<input>

Not sure why the properties are not being initialized or a complete htlm element is being created.

var list = $("#rootElement").find(".listclass");
var button = $("<input/>", {
    type : button,
    value : "Click Me"
});
list.append(button)

change button to "button" and it will work.

Anirudha Gupta
– Anirudha Gupta

2014-12-20 06:34:57 +00:00
Commented Dec 20, 2014 at 6:34 — Anirudha Gupta
– Anirudha Gupta, Commented Dec 20, 2014 at 6:34

rnrneverdies · Accepted Answer · 2014-12-20 06:45:04Z

1

Do this instead

IMO it's much more easy.

var list = $("#rootElement").find(".listclass");
list.append('<input type="button" value="Click Me"/>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rootElement">
  <div class="listclass">
  </div>
</div>

BTW: <input> tag doesn't accept content.

<input value="button">Click Me</input>  <-- wrong

should be

<input type="button" value="Click Me"/> <-- good

or just

<button>Click Me</button>

Your code fixed

You forgot put quotes in button.

var list = $("#rootElement").find(".listclass");
var button = $("<input>", {   
    type: 'button', // here forgot quotes
    value: 'Click Me'
});
list.append(button)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="rootElement">
      <div class="listclass">
    </div>
 </div>

edited Dec 20, 2014 at 6:45

answered Dec 20, 2014 at 6:14

rnrneverdies

15.7k9 gold badges67 silver badges95 bronze badges

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

Comments

Ruchir Gupta · Accepted Answer · 2014-12-20 06:27:05Z

0

You need to write type: "button" instead of type: button

Here is the fiddle: http://jsfiddle.net/su9m81yu/2/

answered Dec 20, 2014 at 6:27

Ruchir Gupta

1,0103 gold badges11 silver badges21 bronze badges

Collectives™ on Stack Overflow

JQuery not initializing object

2 Answers 2

Do this instead

Your code fixed

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Do this instead

Your code fixed

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related