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

У меня есть следующая функция, и я пытаюсь найти лучший способ добавить несколько элементов, используя 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()?

Ответ 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);

Объяснение:

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

Ответ 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 позволяет разработчикам размещать дочерние элементы на произвольный node -подобный родительский элемент, допускающий node -подобные взаимодействия без истинного корня node. Это позволяет разработчикам производить структура без этого внутри видимой DOM

Ответ 3

Вы можете использовать метод добавления в 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);

Ответ 4

Вам нужно добавить несколько детей? Просто сделайте его множественным с 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.

Ответ 5

Вы можете просто сгруппировать элементы в одну группу innerHTML следующим образом:

  let node = document.createElement('li');
  node.innerHTML = '<input type="checkbox"><label>Content typed by the user</label>  <input type="text"><button class="edit">Edit</button><button class="delete">Delete</button>';
  document.getElementById('orderedList').appendChild(node);

тогда appendChild() используется только один раз.

Ответ 6

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

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)

Ответ 7

Объединяем ответы @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]);

Ответ 8

Я хотел бы добавить, что если вы хотите добавить некоторую изменчивость в ваш HTML, вы также можете добавить переменные, как это:

let node = document.createElement('div');
node.classList.add("some-class");
node.innerHTML = '<div class="list">
                  <div class="title">${myObject.title}</div>
                  <div class="subtitle">${myObject.subtitle}
                </div>';

Ответ 9

Вы можете использовать createContextualFragment, он возвращает documentFragment, созданный из строки. Идеально, если вам нужно собрать и добавить более одного Node к существующему Element все вместе, потому что вы можете добавить все это без минусов innerHTML

https://developer.mozilla.org/en-US/docs/Web/API/Range/createContextualFragment

// ...
var listItem = document.createElement("li");
var documentFragment = document.createRange().createContextualFragment('
    <input type="checkbox">
    <label>Content typed by the user</label>
    <input type="text">
    <button class="edit">Edit</button>
    <button class="delete">Delete</button>
')
listItem.appendChild(documentFragment)
// ...