createElement in jQuery

Question

I work with CreateElemant in JavaScript this is my code:

function generateInputs()
{
    var i = document.createElement("input");
    for(var j=0;j<4;j++)
    {
        var c = document.createElement("input");
        var r = document.createElement("input");
        r.setAttribute('type',"radio");
        document.getElementById('questions').appendChild(r);
        c.setAttribute('type',"input");
        document.getElementById('questions').appendChild(c);
    }

    i.setAttribute('type',"text");

    document.getElementById('questions').appendChild(i);

}

And I want to write it with jQuery but I didn't find an equivalent for createElement()

This code is already jQuery compatible because jQuery is written in JavaScript. — Halcyon, Apr 03 '14 at 16:37
And, this is an obvious ducplicate. Did you even google it ? http://stackoverflow.com/questions/268490/jquery-document-createelement-equivalent . @Doge > From what I read I think it's bad practice to mix vanilla JS and jQuery though — Laurent S., Apr 03 '14 at 16:38
`jQuery('')` creates a new `input` element and returns its jQuery object reference — Arun P Johny, Apr 03 '14 at 16:39

score 6 · Accepted Answer · answered Apr 03 '14 at 16:39

Just try with:

function generateInputs()
{
    var i = $('<input type="text"/>');

    for(var j=0;j<4;j++)
    {
        var c = $('<input type="text"/>');
        var r = $('<input type="radio"/>');

        $('#questions').append(c).append(r);
    }


    $('#questions').append(i);

}

codefreaK · Answer 2 · 2014-04-08T05:53:27.173

1

// $("#id"), $("element") or $(".class") for selecting parent


$("#foo").append("<div>hello world</div>")

var txt1="<p>Text.</p>";               // Create element with HTML  
var txt2=$("<p></p>").text("Text.");   // Create with jQuery
var txt3=document.createElement("p");  // Create with DOM
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // Append the new elements

edited Apr 08 '14 at 05:53

answered Apr 03 '14 at 16:38

codefreaK

3,472
4
32
63

Can you provide an explanation ? – Rico Apr 03 '14 at 17:25
sure see the comments on right 3 ways of creating a element after creation just append these to the tag inside which you wanna insert it – codefreaK Apr 08 '14 at 05:54

score 0 · Answer 3 · answered Apr 03 '14 at 16:39

0

$('<input />').attr('type','radio').appendTo(document.body)

some like that

answered Apr 03 '14 at 16:39

Vasiliy Vanchuk

6,618
2
19
43

score 0 · Answer 4 · answered Apr 03 '14 at 16:39

0

Are you just wanting to create new elements on the fly? If so this should do what you need:

$('<input>').attr({
    type: 'hidden',
    id: 'foo',
    name: 'bar'
}).appendTo('#questions');

Obviously change the "type", and "name" to whatever you need

answered Apr 03 '14 at 16:39

Andrew Newby

4,563
4
33
70

Tushar Gupta - curioustushar · Answer 5 · 2014-04-03T16:51:38.550

Fiddle Demo

function generateInputs() {
    var i = $("<input/>"); //var i = document.createElement("input");
    for (var j = 0; j < 4; j++) {
        var c = $("<input/>", { //document.createElement("input");
            type: "radio" //r.setAttribute('type',"radio");
        });
        var r = $("<input/>", { //document.createElement("input");
            type: "radio" //c.setAttribute('type',"radio");
        });
        $('#questions').append(r);//document.getElementById('questions').appendChild(r);
        $('#questions').append(c);//document.getElementById('questions').appendChild(c);
    }
    i.attr('type', "text"); // i.setAttribute('type',"text");
    $('#questions').append(i);//document.getElementById('questions').appendChild(i);
}

A little shorter code

Fiddle Demo

function generateInputs() {
    var i = $("<input/>", {
        type: "text"
    });
    for (var j = 0; j < 4; j++) {
        var c = $("<input/>", {
            type: "radio"
        });
        var r = $("<input/>", {
            type: "radio"
        });
        $('#questions').append(r, c);
    }
    $('#questions').append(i);
}

Learn jQuery

jQuery API Documentation

score 0 · Answer 6 · answered Apr 03 '14 at 16:44

function generateInputs() {
    var i = $('<input type="text"');
    for ( var j = 0; j < 4; j++ ) {
        var c = $('<input type="input" />');
        var r = $('<input type="radio" />');
        $('#questions').append(r).append(c);
    }
    $(document).append(i);
}

createElement in jQuery

6 Answers6