Добавить несколько элементов в JavaScript

Question

У меня есть следующая функция, и я пытаюсь найти лучший способ добавить несколько элементов, используя appendChild().

Когда пользователь нажимает кнопку Добавить, каждый элемент должен выглядеть следующим образом:

<li> 
    <input type="checkbox"> 
    <label>Content typed by the user</label> 
    <input type="text"> 
    <button class="edit">Edit</button> 
    <button class="delete">Delete</button> 
</li> 

и я эту функцию, чтобы добавить эти элементы:

function addNewItem(listElement, itemInput) { 
    var listItem = document.createElement("li"); 
    var listItemCheckbox = document.createElement("input"); 
    var listItemLabel = document.createElement("label"); 
    var editableInput = document.createElement("input"); 
    var editButton = document.createElement("button"); 
    var deleteButton = document.createElement("button"); 

    // define types 
    listItemCheckbox.type = "checkbox"; 
    editableInput.type = "text"; 

    // define content and class for buttons 
    editButton.innerText = "Edit"; 
    editButton.className = "edit"; 
    deleteButton.innerText = "Delete"; 
    deleteButton.className = "delete"; 

    listItemLabel.innerText = itemText.value; 

    // appendChild() - append these items to the li 
    listElement.appendChild(listItem); 
    listItem.appendChild(listItemCheckbox); 
    listItem.appendChild(listItemLabel); 
    listItem.appendChild(editButton); 
    listItem.appendChild(deleteButton); 

    if (itemText.value.length > 0) { 
    itemText.value = ""; 
    inputFocus(itemText); 
    } 
} 

Но вы можете заметить, что я повторяю три раза appendChild() за listItem. Можно ли добавить несколько элементов в appendChild()?

Answer 1

Лично я не понимаю, зачем вы это делаете.

Но если вам действительно нужно, чтобы заменить все appendChild() с помощью одного оператора, вы можете назначить outerHTML из созданных элементов к innerHTML из li элемента.

Вам просто нужно заменить следующее:

listElement.appendChild(listItem); 
    listItem.appendChild(listItemCheckbox); 
    listItem.appendChild(listItemLabel); 
    listItem.appendChild(editButton); 
    listItem.appendChild(deleteButton); 

С следующее:

listItem.innerHTML+= listItemCheckbox.outerHTML + listItemLabel.outerHTML + editButton.outerHTML + deleteButton.outerHTML; 
listElement.appendChild(listItem); 

Объяснение:

Атрибут интерфейса элемента DOM outerHTML получает сериализованный фрагмент HTML, описывающий элемент, включая его ndants. Поэтому назначение outerHTML созданных элементов в innerHTML элемента li аналогично добавлению к нему.

Answer 2

Вы можете сделать это с помощью DocumentFragment.

var documentFragment = document.createDocumentFragment(); 
documentFragment.appendChild(listItem); 
listItem.appendChild(listItemCheckbox); 
listItem.appendChild(listItemLabel); 
listItem.appendChild(editButton); 
listItem.appendChild(deleteButton); 
listElement.appendChild(documentFragment); 

DocumentFragments позволяет разработчикам размещать дочерние элементы на произвольном узел типа родительского , что позволяет узлы типа взаимодействий без истинного корневого узла. Это позволяет разработчикам создавать структуру , не делая этого внутри видимого DOM

Answer 3

Вам нужно добавить несколько детей? Просто сделайте его множественным с appendChildren!

Первые вещи сначала:

HTMLLIElement.prototype.appendChildren = function() { 

    for (var i = 0 ; i < arguments.length ; i++) 

    this.appendChild(arguments[ i ]); 

}; 

Тогда для любого элемента списка:

listElement.appendChildren(a, b, c, ...); 

//check : 
listElement.childNodes;//a, b, c, ... 

Работает с каждым элементом, который имеет appendChild метод, конечно! Мне нравится HTMLDivElement.

Answer 4

Вы можете использовать метод append в JavaScript.

Это похоже на метод добавления jQuery, но он не поддерживает IE и Edge.

Вы можете изменить этот код

listElement.appendChild(listItem); 
listItem.appendChild(listItemCheckbox); 
listItem.appendChild(listItemLabel); 
listItem.appendChild(editButton); 
listItem.appendChild(deleteButton); 

в

listElement.append(listItem,listItemCheckbox,listItemLabel,editButton,deleteButton); 

Answer 5

Можно написать свою собственную функцию, если вы используете встроенный в arguments object

function appendMultipleNodes(){ 
    var args = [].slice.call(arguments); 
    for (var x = 1; x < args.length; x++){ 
     args[0].appendChild(args[x]) 
    } 
    return args[0] 
} 

Тогда вы назвали бы как таковой:

appendMultipleNodes(parent, nodeOne, nodeTwo, nodeThree) 

Answer 6

Объединение ответы от @Atrahasis и @Slavik:

Node.prototype.appendChildren = function() { 
    let children = [...arguments]; 

    if (
    children.length == 1 && 
    Object.prototype.toString.call(children[0]) === "[object Array]" 
) { 
    children = children[0]; 
    } 

    const documentFragment = document.createDocumentFragment(); 
    children.forEach(c => documentFragment.appendChild(c)); 
    this.appendChild(documentFragment); 
}; 

Это принимает детей как множественные аргументы, или в качестве единственного аргумента массива:

foo.appendChildren(bar1, bar2, bar3); 
bar.appendChildren([bar1, bar2, bar3]);