javascript jQuery 中的创建元素

createElement in jQuery

提问by user3438415

I work with CreateElemant in JavaScript this is my code:

我在 JavaScript 中使用 CreateElemant 这是我的代码：

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

我想用 jQuery 编写它，但我没有找到createElement()的等效项

采纳答案by hsz

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

}

回答by codefreaK

// $("#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 

回答by Vasiliy Vanchuk

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

some like that

有些像那样

回答by Andrew Newby

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

显然将“类型”和“名称”更改为您需要的任何内容

回答by Tushar Gupta - curioustushar

Fiddle Demo

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

---

---

更短的代码

Fiddle Demo

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

jQuery API Documentation

jQuery API 文档

回答by Data Crusader

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