web-dev-qa-db-ja.com

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);
  }
}
_

しかし、listItemに対してappendChild()を3回繰り返していることに気づくでしょう。 appendChild()に複数のアイテムを追加することは可能ですか？

javascripthtmlappendchild
18
brunodd

個人的には、なぜそうするのかわかりません。

しかし、本当にすべてのappendChild()を1つのステートメントに置き換える必要がある場合、作成された要素の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フラグメントを取得します。したがって、作成された要素のouterHTMLをinnerHTML要素のliに割り当てることは、それらを追加することに似ています。

6
cнŝdk

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内で構造を作成せずに構造を作成できます

45
Slavik

JavaScriptで append メソッドを使用できます。

これはjQueryのappendメソッドに似ていますが、IEおよびEdgeをサポートしていません。

このコードを変更できます

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

に

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

複数の子を追加する必要がありますか？ 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のように。

4
Atrahasis

@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]);
1
Pend

組み込みの 引数オブジェクト を使用すると、独自の関数を作成することができます。

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)
1
Ricardo Pierre-Louis

次のように、要素を単一の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（）は一度だけ使用されます。

1
Simon Suh

CreateContextualFragmentを使用して、文字列から作成されたdocumentFragmentを返すことができます。複数のNodesを構築して既存の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)
// ...
0
asdru

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>`;
0
J C