在JavaScript中追加多个项

我有以下函数,我正试图找到一种更好的方法,使用appendChild()附加多个项

当用户单击“添加”时,每个项目应如下所示:

<李>
<输入类型=“复选框”>
<标签>用户键入的内容&lt/标签>
<输入类型=“文本”>
<按钮class=“编辑”>编辑&lt/按钮>
<按钮class=“删除”>删除&lt/按钮>
&lt/李>

我有这个功能来添加这些元素:

函数addNewItem(listElement,itemInput){
var listItem=document.createElement(“li”);
var listItemCheckbox=document.createElement(“输入”);
var listItemLabel=document.createElement(“标签”);
var editableInput=document.createElement(“输入”);
var editButton=document.createElement(“按钮”);
var deleteButton=document.createElement(“按钮”);
//定义类型
listItemCheckbox.type=“checkbox”;
editableInput.type=“文本”;
//定义按钮的内容和类
editButton.innerText=“编辑”;
editButton.className=“编辑”;
deleteButton.innerText=“删除”;
deleteButton.className=“删除”;
listItemLabel.innerText=itemText.value;
//appendChild()-将这些项附加到li
listElement.appendChild(listItem);
appendChild(listItemCheckbox);
appendChild(listItemLabel);
listItem.appendChild(编辑按钮);
listItem.appendChild(deleteButton);
如果(itemText.value.length>0){
itemText.value=“”;
输入焦点(itemText);
}
}

但是您可以注意到,我对listItem重复了三次appendChild()。是否可以将多个项目添加到appendChild()

你可以用DocumentFragment来做

var documentFragment=document.createDocumentFragment();
documentFragment.appendChild(listItem);
appendChild(listItemCheckbox);
appendChild(listItemLabel);
listItem.appendChild(编辑按钮);
listItem.appendChild(deleteButton);
appendChild(documentFragment);

DocumentFragments允许开发人员将子元素放置到
任意节点式父节点,允许节点式交互
没有真正的根节点。这样做允许开发人员生成
结构,而不在可见DOM中执行此操作

发表评论