appendChild JavaScript：ガイド

JavaScriptのappendChild（）メソッドは、ノードの最後にアイテムを追加します。 appendChild（）は、

アイテムをリストに追加するためによく使用されます。ノードに複数のアイテムを追加する場合は、複数のappendChild（）ステートメントを使用する必要があります。

JavaScriptのappendChildの使用方法

一部のリストにはテキストが含まれています。他のリストには画像が含まれています。他のリストには、カスタムWeb要素が含まれています。リストにあるものが何であれ、確かなことが1つあります。それは、Webページがリストでいっぱいであることです。

リストを作成するときは、通常、HTMLを使用してその値をハードコーディングします。このプロセスは、JavaScript appendChildと呼ばれるメソッドを使用して高速化できます。。このメソッドを使用すると、リストの最後にアイテムを追加したり、ブロッククォートなどの別のWeb要素を追加したりできます。

このガイドでは、 appendChildについて説明します。 JavaScriptの（）は、その仕組みとその仕組みです。開始に役立つ例を紹介します。始めましょう！

JavaScriptのappendChildとは何ですか？

appendChild（）は、親ノードの最後にノードを追加します。 appendChild（）は通常、HTMLリストにアイテムを追加するために使用されます。ノードとは、HTMLドキュメントオブジェクトモデル（DOM）内の任意のアイテムを指します。

appendChildの構文（）は次のようになります：

parent.appendChild(child);

「親」とは、子を追加する要素を指します。「子」は、親の下部に追加する要素です。

要素を取得するには、JavaScript getElementById（）などのメソッドまたは別の「ゲッター」を使用する必要があります。または、JavaScriptでHTML要素を作成し、その要素をappendChild（）で「親」オブジェクトとして使用することもできます。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

たとえば、スコーンレシピのリストには、ノードのリストが含まれます。リストを作成するため、これらのノードはおそらく

タグになります。

親

が含まれていますタグには子が含まれますノード。 appendChild（）の一般的な使用法は、

を追加することです。

appendChild（）JavaScript：例

appendChildを使用するアプリケーションを作成しましょう。 10年生のクラスの生徒の名前のリストを読み込むサイトを作成します。これを3つのステップに分けます：

フロントエンドの設定
要素の選択と作成
appendChildの使用

フロントエンドの設定

まず、生徒の名前のリストを表示する基本的なフロントエンドを設定します。 index.htmlというファイルを開き、次のコードを貼り付けます：

<!DOCTYPE html>
<html>
    <head>
   	 <title>Tenth Grade Class Roster</title>
   	 <link rel="stylesheet" href="styles.css">
    </head>
    <body>
   	 <h1>Tenth Grade Class Roster</h1>
   	 <ul>
   	 </ul>
    </body>
    <script src="scripts.js"></script>
</html>

基本的なHTMLドキュメントを作成しました。このドキュメントには、子アイテムを含まないタイトルとリストが含まれています。リストは

次に、styles.cssというファイルのページにいくつかのスタイルを追加して、Webページの美しさを向上させましょう。

body {
    background-color: #f7f7f7;
    margin: auto;
    width: 50%;
}

このCSSルールは、ページの背景色を明るい灰色に設定します。これは、CSSのbackground-colorプロパティを使用して行います。のコンテンツも移動しますページの中央にタグを付けます。レイアウトの構造について詳しくは、CSSボックスモデルガイドをご覧ください。

私たちのページはまだ機能していません。リスト要素は追加していません。ブラウザで開いたときのページは次のようになります。

明らかに、やるべきことがまだあります。 JavaScriptをWebページに追加しましょう。

要素の選択と作成

リストにアイテムを追加する前に、作業する要素を選択する必要があります。 scripts.jsというファイルを開き、次のコードを追加します：

const students = document.querySelector("ul");

このコード行は、タグ

let li = document.createElement("li");
li.textContent = "Steven";

このコードは、

でテキストノードを作成します「スティーブン」という単語を含むタグ。あとは、新しく作成した要素をリストに追加するだけです。

appendChild（）JavaScriptメソッドの使用

appendChild （）を使用すると、ノードに要素を追加できます。次のコードをscripts.jsファイルの最後に追加します。
```
students.appendChild(li);
```
これにより、前に作成したリストアイテムがリストに追加されます。 Webページを開いて、結果を見てみましょう。

リストに1つのアイテムがあります。リストに項目を追加する関数を作成することで、コードをより効率的にすることができます。これにより、 createElement を繰り返さなくても、複数のアイテムを追加できます。以前のコード。

createElementを変更しますおよびtextContent これに対するコード行：
```
function createStudent(name) {
	let li = document.createElement("li");
li.textContent = name;
return li;
}
```
この関数は、新しい
を作成します呼び出されるたびに要素。次に、 appendChildを変更します（）この関数を使用するステートメント：
```
students.appendChild(createStudent("Mark"));
students.appendChild(createStudent("Chloe"));
students.appendChild(createStudent("Louise"));
```
これにより、Mark、Chloe、Louiseの3人の生徒が作成されます。 index.htmlファイルをもう一度開いて、変更が加えられているかどうかを確認しましょう。

クラス名簿には現在3つの名前があります。

アイテムを別のリストに移動する

appendChild を使用して、アイテムを別のリストに移動できます（）方法。上から例を修正して、これをアピールしましょう。まず、HTMLページを変更して、2つのリストを作成しましょう。
```
…
    <body>
   	 <h1>Tenth Grade Class Roster</h1>
	<h3>Sat Test</h3>
   	 <ul id="sat_test">
   	 </ul>
	<h3>Has Not Sat Test</h3>
<ul id="has_not_sat_test">
   	 </ul>
    </body>
...
```
2つのリストを作成しました：sattestとsattestではありません。それでは、JavaScriptファイルを更新して、2つのリストを選択し、3人の生徒を作成しましょう。
```
const sat_test = document.getElementById("sat_test");
const has_not_sat_test = document.getElementById("has_not_sat_test");

function createStudent(name) {
	let li = document.createElement("li");
li.textContent = name;
return li;
}

has_not_sat_test.appendChild(createStudent("Mark"));
has_not_sat_test.appendChild(createStudent("Chloe"));
has_not_sat_test.appendChild(createStudent("Louise"));
```
getElementByIdメソッドを使用して2つのリストを選択します。

このコードは、Mark、Chloe、およびLucyを「テストに参加していません」リストに追加します。ルイーズはちょうど彼女のテストに座ったので、彼女は他のリストに移動することができます。 appendChildを使用して彼女の名前を移動できます（）メソッドと lastChildと呼ばれる別のメソッド：
```
var louise = has_not_sat_test.lastChild;
sat_test.appendChild(louise);
```
このコードは、「テストに参加していません」リストの最後のDOM要素を選択します。このアイテムは、lastChildメソッドを使用して取得されます。次に、この項目を「sattest」リストに追加しました。

HTMLファイルを開いてみましょう：

2つのリストがあります：sattestとsattestではありません。最初に、すべての学生の名前を「テストに参加していません」リストに移動します。次に、 appendChildを使用します（）ルイーズの名前を「sattest」リストに移動します。

結論

appendChild （）メソッドは、要素の最後にノードを作成するために使用されます。 appendChild（）を使用できます要素のリストに任意の要素を追加します。たとえば、
要素を
タグに追加できます。

課題として、 appendChildを使用できるかどうかを確認してください（）画像のグリッドを作成するJavaScriptメソッド。ページが読み込まれると、 appendChildを使用して4つの画像のリストがレンダリングされます。（）。

上位のJavaScriptオンラインコースと学習リソースのガイダンスについては、JavaScriptの学習方法ガイドをご覧ください。

それ以外の場合はJavaScript：ステップバイステップガイド

jQueryのclick（）メソッドを使用してイベントをトリガーする
1. appendChild JavaScript：ガイド
  JavaScriptのappendChild（）メソッドは、ノードの最後にアイテムを追加します。 appendChild（）は、アイテムをリストに追加するためによく使用されます。ノードに複数のアイテムを追加する場合は、複数のappendChild（）ステートメントを使用する必要があります。 JavaScriptのappendChildの使用方法一部のリストにはテキストが含まれています。他のリストには画像が含まれています。他のリストには、カスタムWeb要素が含まれています。リストにあるものが何であれ、確かなことが1つあります。それは、Webページがリストでいっぱいであることです。リスト
2. JavaScriptのリスト要素の兄弟？
  兄弟を見つけるにはリスト要素のJavaScriptは、 node.nextSiblingというメソッドを提供しています。。リストのメンバーを知っている場合は、その兄弟を見つけることができます。一言で言えばそれについて話し合いましょう。構文 node.nextSibling; 例次の例では、3つのリスト要素があります。 nextSiblingプロパティの使用最初の要素の兄弟が検出され、結果が出力に表示されます。 <html> <body> <ul><li id="item1">Tesla</li><