如何动态创建表单元素

我有以下代码我试图动态创建带有和不带标签的单选按钮。 当我创建单选按钮时，我无法将文本放在单选按钮中，这里是没有标签的代码这是期望的

Alex 

 $('').attr({ type:'radio', name:'name', value: "Alex", text:"Alex" }).insertAfter("#divid")); 

现在有了标签，

 Alex 

 //create a label tag var label = $('', { text:"Alex"}); //append input tag to label $(label).append($('').attr({ type:'radio', name:"Alex", value:"Alex" }).insertAfter("#divid")); 

以上两个都不会在控制台上产生任何错误，但它不会产生我感兴趣的正确的HTML标签。还有一种方法可以直接向无线电添加标签，因为我动态创建它们。 我的意思是我不想创建一个标签标签，并附加单选按钮。 非常感谢您的帮助

Answer 1

动态创建label和radio

jsBin的例子

 var $input = $('', { type : "radio", name : "name", value : "alex" }); $("", { insertAfter: "#somediv", // (or use appendTo: to insert into it) append: [$input, "Alex"] // include our $input and also some text description }); 

  
DIV 

Answer 2

你应该替换var label = $('').attr({ text:"Alex"}); var label = $('').text("Alex");

另外 – 你的代码中有很少的语法错误，我没有看到什么是如此难以复制+粘贴正确。

Answer 3

我喜欢Roko的答案 ，但如果你正在构建用户内容的单选按钮标签，那么它很容易受到HTML注入的攻击。

在这里，我使用.text()方法来确保文本被正确转义。

 var $target = $('#target'), records = [{ id: 1, name: "Alex" }, { id: 2, name: "Test that HTML is not injected" }]; $target.append('
With Labels
'); for (var i=0; i < records.length; i++) { $target.append($('').text(records[i].name) .prepend($('', { value: records[i].id }))); } $target.append('
Without Labels
'); for (var i=0; i < records.length; i++) { $target.append($('').text(records[i].name) .prepend($('', { value: records[i].id }))); }