I have the this checkbox I'm trying to create in JQuery
<input type="checkbox" id="someID">Hello World</input>
I thought this was the equivalent JQuery code:
var $ctrl = $('<input/>').attr({ type: 'checkbox', id: 'someID', text: 'Hello World'})
But, when I add the $ctrl to this div tag it seems to not include the 'Hello World' text.
$("#renderedControl").append($ctrl);
Any ideas what I'm missing?
The correct markup for what you're trying to do is this:
<label><input type="checkbox" id="someID">Hello World</label>
Input elements cannot contain content (and only require a closing tag or self-closing in xhtml).
To create the above with jQuery try some variation on this:
var $ctrl = $('<label />').html('Hello world')
.prepend($('<input/>').attr({ type: 'checkbox', id: 'someID'}));
try this
var $ctrl = $(document.createElement("input")).attr({
id: 'topicFilter-'
,name: 'test'
,value: 'test'
,text :'my testing'
,type: 'checkbox'
,checked:true
})
var lbl = '<label>Hello world</label>';
$("#renderedControl").append($ctrl.after(lbl));
Hops its helps
first if you want to create the check box do it like this
$("#renderedControl").append('<input type="checkbox" id="someID"/>');
Notices that html of the check should be define like this
<input type="checkbox" name="example" id="someID" />
If you want to set a label you have to create a element for that checkbox like this, the reason behind that you cannot see the Hellow world it's not correct of use text to set a label for a checkbox and I think it's not even a valid attribute for that type. Here's an example of the html related to a label for that checkbox
<label for="example">Hellow world</label>
And then append all the html related like this
$("#renderedControl").append('<label for="checkbox">Hellow world</label>').append('<input type="checkbox" name="checkbox" id="someID" />')
At the end you could create something like this
<input /> elements aren't pairs of tags. They are self-closing:
<input type="checkbox" id="someID" name="someName" value="input" />
With jQuery, you can do this:
$('<input />', {
'type': 'checkbox',
'id': 'someID',
'name': 'someName'
}).after($('<label />', {
'for': 'someName'
}).text('Hello World')).appendTo('body');
