9

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()

3
  • 1
    This code is already jQuery compatible because jQuery is written in JavaScript.
    – Halcyon
    Apr 3, 2014 at 16:37
  • 1
    jQuery('<input />') creates a new input element and returns its jQuery object reference Apr 3, 2014 at 16:39
  • $('<div />'); you need this.
    – Jai
    Apr 3, 2014 at 16:41

6 Answers 6

6

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);

}
0
1

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

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 
2
  • Can you provide an explanation ?
    – Rico
    Apr 3, 2014 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 8, 2014 at 5:54
0
$('<input />').attr('type','radio').appendTo(document.body)

some like that

0
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);
}
0

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.