使用jQuery动态创建元素

我正在基于处理程序返回的数组构建jQuery中的复选框项列表

包含的元素是下面的

.listContainer

元素，然后我要添加到其中的每个动态元素都采用

.listContainerItem

元素的形式。每个项目都有复选框值和基于创建它的数组项目的标签

<div class="listContainer">
    <div class="listContainerItem">
        <input type="checkbox" value="1" />
        <div class="listContainerItemLabel">Checkbox 1</div>
    </div>
</div>

复选框1

对于传递数组的函数，最有效的创建方法是什么？我一直在努力实现以下目标，但很快就遇到了主要的性能问题

function AddItemToListContainer(item) {
    var currentItems = $j("#listContainerAvailable .listContainerItem");
    if ($j.grep(currentItems, function (e) { return $j(e).find(":checkbox:first").val() == item.Id; }).length === 0) {
        labelDiv = $j("<div />").addClass("listContainerItemLabel").html(item.Text);
        itemToAdd = $j("<div />").addClass("listContainerItem").append("<input type=\"checkbox\" value=\"" + item.Id + "\" />").append(labelDiv);
        currentItems.append(itemToAdd);
    }
}

函数AddItemToListContainer（项）{
var currentItems=$j（“#listContainerAvailable.listContainerItem”）；
if（$j.grep（currentItems，函数（e）{return$j（e）.find（“：checkbox:first”）.val（）==item.Id；}）.length==0）{
labelDiv=$j（“”.addClass（“listContainerItemLabel”）.html（item.Text）；
itemToAdd=$j（“”.addClass（“listContainerItem”）.append（“”.append（labelDiv）；
currentItems.append（itemToAdd）；
}
}

---

我已经研究了

.map

函数，但不确定如何实现它。有人能给我指出正确的方向吗？

我会从以下内容开始：

var $container = $j('#listContainerAvailable');
var checkboxes = {};

function AddItemToListContainer(item) {
    if (checkboxes[item.Id]) return false;

    checkboxes[item.Id] = true;

    var $item = $j('<div />', {
        'class': 'listContainerItem',
    }).appendTo($container);

    $j('<input />', {
        'type': 'checkbox',
        'value': item.Id
    }).appendTo($item);

    $j('<div />',  {
        'class': 'listContainerItemLabel',
        'text': item.Text
    }).appendTo($item);
}

var$container=$j（“#listContainerAvailable”）；
var复选框={}；
函数AddItemToListContainer（项）{
if（复选框[item.Id]）返回false；
复选框[item.Id]=true；
变量$item=$j（“”{
“类”：“listContainerItem”，
}).附于（$集装箱）；
$j（“”{
'类型'：'复选框'，
“值”：item.Id
}).附于（$项目）；
$j（“”{
“类”：“listContainerItemLabel”，
“文本”：项。文本
}).附于（$项目）；
}

---

只要在创建页面时这些元素都不存在，就可以将它们添加到哈希表中，而不是在DOM中搜索。我认为您还可以从JS模板引擎中获益，如

这将为您提供正确的方向： 按下代码按钮时，将检查输入字段是否已填写 如果它是空的，它会弹出一个提示 如果它不是空的，则接受输入字段的值，创建一个复选框并将输入值放在复选框旁边

表单的HTML

<form name="formName" id="listContainerItem">
    <input id="newinput" type="text" value=""/><button id="button">Add new rule</button> <br />
    <input type="checkbox" value="1" /><span class="listcontainerItemLabel" />Checkbox 1 <br />
</form>

添加新规则

复选框1

Javascript

$(#button).click(function() {
function addLine(e) {
        e.preventDefault();
        var x = document.getElementById('newinput').value;
        if(x == '') {
            alert('not filled in')
        } else {
            $('#listContainer').append('<input type="checkbox" value="1" /><span class="listcontainerItemLabel" />'+x+  '<br />')
        }
    }

$（#按钮）。单击（函数（）{
函数addLine（e）{
e、 预防默认值（）；
var x=document.getElementById（'newinput'）。值；
如果（x=''）{
警报（'未填写'）
}否则{
$（'#listContainer'）。追加（'+x+'
）
}
}

}))

记住

document.getElementById（'newinput'）

也可以这样写：

$（'newinput'）

---

你所要做的就是改变你需要的东西。祝你好运，祝你度过愉快的一天

你想让这些元素一次出现一个吗？或者只是在页面加载时从数组中动态创建

最后：

html

和jquery

var array = ['1', '2', '3', '4', '5'];

 $.each(array, function (index, value) {
    $(".listContainerItem").append('<input type="checkbox" value="' + value + '" /> <div         class="listContainerItemLabel">Checkbox ' + value + '</div>');
 });

var数组=['1'，'2'，'3'，'4'，'5']；
$.each（数组、函数（索引、值）{
$（“.listContainerItem”）.append（'Checkbox'+value+''）；
});

---

还有一些.click事件可以给您带来第一个效果

您可以使用多种方法动态创建

$("#elementid").after("<input type='checkbox'></input><span></span>;

$("#elementid").before("<input type='checkbox'></input><span></span>;

$("#elementid").append("<input type='checkbox'></input><span></span>;

$("#elementid").prepend("<input type='checkbox'></input><span></span>;

$（“#elementid”）。在（“；
$（“#elementid”）。在（“；
$（“#elementid”）.append（”；
$（“#elementid”）.prepend（”；

---

与wise一样，您可以使用insertAfter（）、insertBefore（）、appendTo（）、prependTo（）….

作为注释：

。append（“”）

可以是

。append（“”）

这更易于阅读和调试。您是否可以立即获取项目列表，是否可以替换整个复选框集，或者它是否会在任何时候只附加一些新的复选框？我有一个单独的函数，它首先从DOM中删除数组中不存在的任何内容，因此我需要做的就是检查每个项目是否已在中表示DOM，如果没有添加它。

$("#elementid").after("<input type='checkbox'></input><span></span>;

$("#elementid").before("<input type='checkbox'></input><span></span>;

$("#elementid").append("<input type='checkbox'></input><span></span>;

$("#elementid").prepend("<input type='checkbox'></input><span></span>;