JavaScriptで取得した要素の追加方法4つ｜HTMLの取得方法も解説

Javascript
プログラミング言語

公開日時: 2020-06-04 　更新日時: 2022-06-13

この記事でわかること

システム エンジニア: JavaScriptの配列要素の追加とは、どのようなものなのでしょうか？

プロジェクト マネージャー: JavaScriptの配列は可変長で、配列の要素数を事前に決定しておく必要ありません。配列要素を追加するパターンをご紹介していきます。

JavaScriptの配列とは？

JavaScriptにおける配列はArrayクラスが該当し、Arrayクラスはグローバルオブジェクトで、配列に対する一般的な操作を持っています。

C++などの動的型付き言語などと違い、JavaScriptの配列は要素数、要素の型を決めずに使用することができます。

JavaScriptで取得した要素の追加方法4つ

JavaScriptでの配列に対する要素の追加方法を4つに分けて紹介します。先頭、末尾に追加するのは簡単ですが、指定位置に追加するには引数に要素だけでなくインデックス（添え字）も指定しなければいけません。

まずは、先頭、末尾に追加するためのメソッドの紹介です。

1：先頭に要素を追加する

Array.prototype.unshift()は、配列の先頭に要素を追加するメソッドです。

let array = [0, 1, 2];
array.unshift(100); // arrayは[100, 0, 1, 2]になる。

1 2	let array = [0, 1, 2]; array.unshift(100); // arrayは[100, 0, 1, 2]になる。

引数で指定した要素は先頭に追加されるので、元からあった要素は一つずつ後ろにずれることになります。unshift()もarray.unshift(100, 200)といったように、一度に複数の要素を先頭に追加できます。

2：末尾に要素を追加する

Array.prototype.push()は、配列の末尾に要素を追加するメソッドです。末尾とは、例えば[0, 1, 2]という配列があった場合の最後の要素である2の後ろと言う意味です。

let array = [0, 1, 2];
array.push(3); // arrayは[0, 1, 2, 3]になる。

1 2	let array = [0, 1, 2]; array.push(3); // arrayは[0, 1, 2, 3]になる。

push()を実行して要素を一つ追加すると、メソッドを実行した配列の長さは1増えることになります。push()は一つだけではなく、一度に複数の要素を末尾に追加することもできます。

let array = [0, 1, 2];
array.push(100, 200, 300); // arrayは[0, 1, 2, 100, 200, 300]になる。

let array = [0, 1, 2];

array.push(100, 200, 300); // arrayは[0, 1, 2, 100, 200, 300]になる。

インデックス位置の指定による追加では、末尾なのかどうかは判断できませんでしたが、push()メソッドを使用すれば、明確に配列に要素を追加していると表現できます。

3：指定した位置に要素を追加する

JavaScriptでは、ブラケット構文と呼ばれる角括弧[]を用いた記法を使用して、角括弧の中にobj[‘prop’]というように、文字列を記述することでオブジェクトのプロパティにアクセスできます。
一方、配列は特殊なオブジェクトで、要素にアクセスするためには角括弧の中にarray[0]といったように、整数値を指定する必要があります。そして要素を追加するためには角括弧で要素の位置を指定して値を代入します。

let array = [];
array[0] = "hello";

let index = 1;
array[index] = "JavaScript"; // 変数を指定してもOK

let array = [];

array[0] = "hello";

let index = 1;

array[index] = "JavaScript"; // 変数を指定してもOK

要素の位置であるインデックスは0から始まります。位置0が1つ目の要素になります。整数値で指定して文字列や他のオブジェクトなどを代入すれば、好きな位置に要素を追加できます。
少し注意したい点としては、JavaScriptの配列は要素が連続していることを保証しない、ということです。先ほど「好きな位置に要素を追加できる」と述べました。これは、例えば空の配列に対して、いきなり100番目に要素を追加することもできるということです。

let array = [];
array[99] = 'number 100';

let array = [];

array[99] = 'number 100';

上記のようにした場合、配列の長さは100になりますが、要素は100番目にしか入っておらず1から99番目は「空」という扱いになります。その状態でarray[3]のように何も要素が入っていない位置を参照すると、結果は未定義(undefined)が返されます。
このように整数値で位置を指定して要素を追加することも可能ですが、要素の抜けが発生したり、元からその位置にあった要素を変更しているのか、それとも新たに追加しているのか、コードを見ただけでは判断が難しくなってしまいます。
明確に「要素を追加している」と表現したい場合は後述する配列のメソッドを使用するべきでしょう。

4：任意の位置に要素を追加する

Array.prototype.splice()メソッドは、配列内の任意の位置に要素を追加することができます。

let array = ["zero", "one", "three"];
array.splice(2, 0, 'two'); // arrayは["zero", "one", "two", "three"]になる。

1 2	let array = ["zero", "one", "three"]; array.splice(2, 0, 'two'); // arrayは["zero", "one", "two", "three"]になる。

上記の例では、"one"の後ろのインデックス位置2の箇所に"two"という文字列を追加しています。もともとインデックス位置2にあった"three"は一つ後ろにずれます。
このようにsplice()メソッドは要素の追加もできますが、追加と同時に要素を削除することも可能です。先ほどの例では2番目の引数に0を指定しました。これを1に変更してみましょう。

let array = ["zero", "one", "three"];
array.splice(2, 1, 'two'); // arrayは["zero", "one", "two"]になる。

1 2	let array = ["zero", "one", "three"]; array.splice(2, 1, 'two'); // arrayは["zero", "one", "two"]になる。

もともと、インデックス位置2にあった"three"が削除されて、"two"が追加されています。
splice()メソッドの引数は

(インデックス位置の指定、指定した位置から削除する要素の数、指定した位置に追加する要素)

となっています。つまり、2番目の引数に0より大きい値を指定すると、その数だけ配列から要素が削除され、その後に最後の引数で指定した要素が追加される、という動作になります。
2番目の引数に0を指定すると、「要素を削除しない」という意味になるので、要素の追加だけが行われることになります。
最後の引数を指定しないこともできます。その場合に2番目の引数に0より大きい値を指定すると、要素を追加せず削除だけが行われることになります。
また、最後の引数は複数指定することもできます。

let array = ["zero", "three"];
array.splice(1, 0, "one", "two"); // arrayは["zero", "one", "two", "three"]になる。

1 2	let array = ["zero", "three"]; array.splice(1, 0, "one", "two"); // arrayは["zero", "one", "two", "three"]になる。

3番目以降の引数に、追加したい要素を続けて記述することで一度に複数の要素を指定した位置に追加できます。

SE: JavaScriptの配列へ要素を追加する方法には、さまざまなものがあるのですね。

PM: そうですね。だからこそ、適切な方法を選ぶことが大切です。

JavaScriptを使ったHTML要素の取得方法6つ

JavaScriptでの配列に対する要素の追加方法は様々でしたが、HTML要素の取得にもいくつかの方法があります。今回はその取得方法を6つに分けて紹介します。最初にHTML要素の先頭の要素を取得する方法です。

1：先頭の要素を取得する

JavaScriptで先頭の要素を取得するためにはElementオブジェクトの「firstElementChild」を使用します。これはHTML要素の最初の子要素を返してくれる、Elementオブジェクトのプロパティです。子要素がない場合はnullを返します。

先頭の子要素を取得するためのプロパティに「firstChild」というものもありますが、これは改行などのテキストも取得してしまいます。HTML要素を取得したい場合は「firstElementChild」を使用しましょう。

2：末尾の要素を取得する

末尾の要素を取得するためにはElementオブジェクトの「lastElementChild」を使用します。こちらもHTML要素の最後の子要素を返してくれる、Elementオブジェクトのプロパティです。

末尾の子要素を取得するためのプロパティに「lastChild」というものもありますが、これは改行などのテキストも取得してしまいます。HTML要素を取得したい場合は「lastElementChild」を使用しましょう。

3：要素数を取得する

JavaScriptで要素数を取得するためにはElementオブジェクトの「childElementCount」を使用します。HTML要素の子要素の数を返してくれる、Elementオブジェクトのプロパティです。

対象のHTML要素の直下の子要素数を返すため、階層構造になっている場合は1階層下のHTML要素のみをカウントします。

4：指定した位置から一つ以上の値を取得する

指定した位置の子要素を取得する場合は、Elementオブジェクトの「children」を使用します。「children」メソッドは対象要素の直下の子要素をすべて取得し、HTMLCollectionとして返すメソッドです。

HTMLCollectionはArrayが持つメソッドを使用することができませんがindex指定などはできます。指定位置の要素を取得したい場合は、childrenで子要素を配列形式で取得した後、indexを指定することで取得することが可能です。以下にサンプルコードを示します。

HTML

<ul id="sample-1">
  <li>アイテム１</li>
  <li>アイテム２</li>
  <li>アイテム３</li>
</ul>

</ul>

JavaScript

let children = document.getElementById("sample-1").children;
console.log(children[1]);
// <li>アイテム２</li>

let children = document.getElementById("sample-1").children;

console.log(children[1]);

// <li>アイテム２</li>

5：配列の値の最大値/最小値を取得する

最大値、最小値を取得する場合は、HTML要素の中身を配列に入れてからソートする必要があります。以下にサンプルコードを示します。

HTML

<ul id="sample-1">
  <li>アイテム４</li>
  <li>アイテム１</li>
  <li>アイテム２</li>
  <li>アイテム３</li>
</ul>

</ul>

JavaScript

let children = document.getElementById("sample-1").children;
let contents = [];
let sortContents = [];
for (let i = 0; i < children.length; i++) { //ループ(繰り返し)処理
  contents.push(children[i].innerText); //子要素を配列に追加
  sortContents.push(children[i].innerText); //ソート用配列に追加
}
sortContents.sort();
console.log(children[contents.indexOf(sortContents[0])]);
console.log(children[contents.indexOf(sortContents[sortContents.length - 1])]);
// <li>アイテム１</li>
// <li>アイテム４</li>

let children = document.getElementById("sample-1").children;

let contents = [];

let sortContents = [];

for (let i = 0; i < children.length; i++) { //ループ(繰り返し)処理

contents.push(children[i].innerText); //子要素を配列に追加

sortContents.push(children[i].innerText); //ソート用配列に追加

}

sortContents.sort();

console.log(children[contents.indexOf(sortContents[0])]);

console.log(children[contents.indexOf(sortContents[sortContents.length - 1])]);

// <li>アイテム１</li>

// <li>アイテム４</li>

6：配列の値をランダムに取得する

配列からランダムに値を取得するには、Mathオブジェクトを使用します。Mathオブジェクトには、ランダムな値を返すrandomメソッドを持っているのでこれを使用します。以下はサンプルコードです。

HTML

<ul id="sample-1">
  <li>アイテム４</li>
  <li>アイテム１</li>
  <li>アイテム２</li>
  <li>アイテム３</li>
</ul>

</ul>

JavaScript

let children = document.getElementById("sample-1").children;
console.log(children[Math.floor(Math.random() * children.length)]);

1 2	let children = document.getElementById("sample-1").children; console.log(children[Math.floor(Math.random() * children.length)]);

JavaScriptの配列を削除する方法4つ

JavaScriptでの配列の追加方法が分かったところで、今度は削除の方法です。ここでは、JavaScriptの配列の削除方法を4つ紹介します。削除する対象の要素は、JavaScriptの要素の追加方法で紹介したものと同じです。

1：配列の先頭を削除する

まずは、先頭の要素の削除方法です。JavaScriptではArray.prototype.shift()で先頭の要素を削除できます。shiftメソッドで取り除いた要素が返り値として返されます。以下はサンプルコードです。

JavaScript

let array = [0, 1, 2, 100];
array.shift();
console.log(array);
// [1, 2, 100]

let array = [0, 1, 2, 100];

array.shift();

console.log(array);

// [1, 2, 100]

2：配列の末尾を削除する

Array.prototype.pop()で配列の末尾の要素を削除できます。popメソッドで取り除いた要素が返り値として返されます。以下はサンプルコードです。

JavaScript

let array = [0, 1, 2, 100];
array.pop();
console.log(array);
// [0, 1, 2]

let array = [0, 1, 2, 100];

array.pop();

console.log(array);

// [0, 1, 2]

3：指定した位置から一つ以上の値を削除する

Array.prototype.splice()で配列から位置を指定して要素を削除できます。第1引数に配列の位置、第2引数には削除したい要素数を指定します。以下はサンプルコードです。

JavaScript

let array = [0, 1, 2, 100];
array.splice(1, 2);
console.log(array);
// [0, 100]

let array = [0, 1, 2, 100];

array.splice(1, 2);

console.log(array);

// [0, 100]

4：配列の全要素を削除する

Array.prototype.splice()で全要素の削除ができます。やり方は、spliceの第1引数に0のみを指定します。0だけを指定することでまとめて全ての要素が削除されます。

JavaScript

let array = [0, 1, 2, 100];
array.splice(0);
console.log(array);
// []

let array = [0, 1, 2, 100];

array.splice(0);

console.log(array);

// []

システム エンジニア: JavaScriptの配列へ要素を追加する方法には、さまざまなものがあるのですね。

プロジェクト マネージャー: そうですね。だからこそ、適切な方法を選ぶことが大切です。

JavaScriptを使って取得した要素を追加してみよう

JavaScriptで要素を取得した後、任意の場所に追加するには、以下のようなJavaScriptコードでできます。

HTML

<ul id="sample-1">
  <li>アイテム４</li>
  <li>アイテム１</li>
  <li>アイテム２</li>
  <li>アイテム３</li>
</ul>

</ul>

まず移動したい要素と、移動先の要素を取得します。

JavaScript

let targetElem=document.getElementById("sample-1").firstElementChild; //移動対象の要素
let toElem=document.getElementById("sample-1").lastElementChild; //移動先の要素

1 2	let targetElem=document.getElementById("sample-1").firstElementChild; //移動対象の要素 let toElem=document.getElementById("sample-1").lastElementChild; //移動先の要素

次に、移動先の要素の後ろに移動対象の要素を追加します。

JavaScript

toElem.parentNode.insertBefore(targetElem, toElem.nextSibling); //移動

1	toElem.parentNode.insertBefore(targetElem, toElem.nextSibling); //移動

結果は以下のようになり、要素の移動（追加）ができます。

HTML

<ul id="sample-1">
  <li>アイテム１</li>
  <li>アイテム２</li>
  <li>アイテム３</li>
  <li>アイテム４</li>
</ul>

</ul>

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

JavaScriptで取得した要素の追加方法4つ｜HTMLの取得方法も解説

JavaScriptの配列とは？

JavaScriptで取得した要素の追加方法4つ

1：先頭に要素を追加する

2：末尾に要素を追加する

3：指定した位置に要素を追加する

4：任意の位置に要素を追加する

JavaScriptを使ったHTML要素の取得方法6つ

1：先頭の要素を取得する

2：末尾の要素を取得する

3：要素数を取得する

4：指定した位置から一つ以上の値を取得する

5：配列の値の最大値/最小値を取得する

6：配列の値をランダムに取得する

JavaScriptの配列を削除する方法4つ

1：配列の先頭を削除する

2：配列の末尾を削除する

3：指定した位置から一つ以上の値を削除する

4：配列の全要素を削除する

JavaScriptを使って取得した要素を追加してみよう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

JavaScriptで取得した要素の追加方法4つ｜HTMLの取得方法も解説

JavaScriptの配列とは？

JavaScriptで取得した要素の追加方法4つ

1：先頭に要素を追加する

2：末尾に要素を追加する

3：指定した位置に要素を追加する

4：任意の位置に要素を追加する

JavaScriptを使ったHTML要素の取得方法6つ

1：先頭の要素を取得する

2：末尾の要素を取得する

3：要素数を取得する

4：指定した位置から一つ以上の値を取得する

5：配列の値の最大値/最小値を取得する

6：配列の値をランダムに取得する

JavaScriptの配列を削除する方法4つ

1：配列の先頭を削除する

2：配列の末尾を削除する

3：指定した位置から一つ以上の値を削除する

4：配列の全要素を削除する

JavaScriptを使って取得した要素を追加してみよう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

JavaScriptで作るものは？できること3つとあわせてご紹介

HTMLで基本のスライドショーの作成方法とカスタマイズのやり方を解説

JavaScriptのwhile文のポイント3つ｜ループの処理方法も解説

JavaScriptでのDOM操作とは｜さらに活用する3つの方法

jQueryのloadとは？loadの使用方法やjQueryを使わずにloadを行う方法を紹介