JavaScript・jQueryによる要素を追加・挿入する方法
今回はJavaScript・jQueryによる要素を追加・挿入する方法を備忘録も兼ねて簡単にまとめました。
簡単な説明になりますが良ければ参考にしてみて頂けたら幸いです!
目次
JavaScript・jQueryによる要素を追加・挿入する方法とは?
WEB制作では場合によっては既存のHTMLの要素に対して要素を追加・挿入してDOMの状態を操作して表示を変更させる必要がある依頼・要望がある事があります。
そんな時、JavaScript・jQueryによる要素を追加する方法を用いてDOM操作を行い、DOMを変更しCSSでデザイン調整して実装するようなWEB制作をする事が求められます。
JavaScript編
jQueryではなくJavaScriptで記述する場合はメリットとしてjQueryライブラリを読み込んでいなくても処理が実行可能という点です。
jQueryを読み込んでいるサイトだとしてもより早い段階で処理を実行させたい場合は、jQueryライブラリが読み込まれる前に記述して処理させる必要がある場合が実際の仕事では発生したりしますので、そういう場合はJavaScriptで記述していく事が必要な場合があります。
挿入する新しい要素を作成
JavaScript編での要素の追加・挿入は、最初に挿入する要素を作成する必要がありますので下記のように記述します。
まずはnewElement
の箇所でHTML要素<p></p>
を作成しています。
その次の行で作成した要素に対してテキストを追加して<p>挿入テキスト</p>
のように追加・挿入する新しいHTML要素を作成しておきます。
(function () {
document.addEventListener('DOMContentLoaded', function () {
// 挿入する新しい要素を作成
let newElement = document.createElement('p') ; // 「<p></p>」を作成
newElement.textContent = '挿入テキスト'; // 「<p>挿入テキスト</p>」のようにテキスト追加
}, false);
}());
※「document.addEventListener(‘DOMContentLoaded’, function () {〜}, false);」の部分はDOMが読み込まれたら内部を処理しての記述例になります
「(function () {〜}());」の部分は即時実行関数(グローバル汚染対策)になりますので不要な場合は削除してください
指定した要素の直前に挿入する
指定した要素の直前に挿入するにはinsertAdjacentElement
メソッドを使用して下記のように記述します。
下記では追加・挿入先である#before
が付与されている要素の1番目([0]
)の要素を指定し、insertAdjacentElement
メソッドの第一引数(position)にbeforebegin
を指定し、第二引数(element)にDOMツリーに挿入する為に事前に作成しておいたHTML要素を格納した変数newElement
を指定しています。
document.querySelectorAll('#before')[0].insertAdjacentElement('beforebegin', newElement);
※要素の取得に関してはjQueryと同じような感覚で使える「document.querySelectorAll(‘#○○’)」を使用しての記述例になります
指定した要素の最初の子ノードとして挿入する
指定した要素の最初の子ノードとして挿入するにはinsertAdjacentElement
メソッドを使用して下記のように記述します。
下記では追加・挿入先である#prepend
が付与されている要素の1番目([0]
)の要素を指定し、insertAdjacentElement
メソッドの第一引数(position)にafterbegin
を指定し、第二引数(element)にDOMツリーに挿入する為に事前に作成しておいたHTML要素を格納した変数newElement
を指定しています。
document.querySelectorAll('#prepend')[0].insertAdjacentElement('afterbegin', newElement);
※要素の取得に関してはjQueryと同じような感覚で使える「document.querySelectorAll(‘#○○’)」を使用しての記述例になります
指定した要素の最後の子ノードとして挿入する
指定した要素の最後の子ノードとして挿入するにはinsertAdjacentElement
メソッドを使用して下記のように記述します。
下記では追加・挿入先である#append
が付与されている要素の1番目([0]
)の要素を指定し、insertAdjacentElement
メソッドの第一引数(position)にbeforeend
を指定し、第二引数(element)にDOMツリーに挿入する為に事前に作成しておいたHTML要素を格納した変数newElement
を指定しています。
document.querySelectorAll('#append')[0].insertAdjacentElement('beforeend', newElement);
※要素の取得に関してはjQueryと同じような感覚で使える「document.querySelectorAll(‘#○○’)」を使用しての記述例になります
指定した要素の直後に挿入する
指定した要素の直後に挿入するにはinsertAdjacentElement
メソッドを使用して下記のように記述します。
下記では追加・挿入先である#after
が付与されている要素の1番目([0]
)の要素を指定し、insertAdjacentElement
メソッドの第一引数(position)にafterend
を指定し、第二引数(element)にDOMツリーに挿入する為に事前に作成しておいたHTML要素を格納した変数newElement
を指定しています。
document.querySelectorAll('#after')[0].insertAdjacentElement('afterend', newElement);
※要素の取得に関してはjQueryと同じような感覚で使える「document.querySelectorAll(‘#○○’)」を使用しての記述例になります
注意
jQueryでも同様の事ですが特にJavaScriptで記述する場合は対応ブラウザなどその時の対応環境で利用可能(メソッドなど)なものか下記の「MDN公式サイト」や「Can I use…」などで調べて実装するように注意しましょう。
対応状況が確認できるサイト
jQuery編
jQueryで処理をする場合は、短い処理で記述できることや学習コストが少なくすむなど便利な事が多いので、特に初心者の方はjQueryで処理を記述していく方がオススメです。
ですが便利な事ばかりではなく、もちろんデメリットもあります。
その1つがjQueryライブラリ本体を読み込んだ後に処理を記述していく必要があるという点です。
より早い段階で処理を実行させたい、またはjQueryライブラリ本体を読み込める環境ではない場合は、JavaScriptで記述していく事も考慮しましょう。
指定した要素の直前に挿入する
jQueryでの指定した要素の直後に挿入するにはbefore
メソッドを使用して下記のように記述します。
下記では追加・挿入先である#before
が付与されている要素を指定し、before
メソッドの引数(content)にDOMツリーに挿入するHTML要素<p>指定した要素の直前に挿入する</p>
を指定しています。
$('#before').before('<p>指定した要素の直前に挿入する</p>');
指定した要素の最初の子ノードとして挿入する
jQueryでの指定した要素の最初の子ノードとして挿入するにはprepend
メソッドを使用して下記のように記述します。
下記では追加・挿入先である#prepend
が付与されている要素を指定し、prepend
メソッドの引数(content)にDOMツリーに挿入するHTML要素<p>指定した要素の最初の子ノードとして挿入する</p>
を指定しています。
$('#prepend').prepend('<p>指定した要素の最初の子ノードとして挿入する</p>');
指定した要素の最後の子ノードとして挿入する
jQueryでの指定した要素の最後の子ノードとして挿入するにはappend
メソッドを使用して下記のように記述します。
下記では追加・挿入先である#append
が付与されている要素を指定し、append
メソッドの引数(content)にDOMツリーに挿入するHTML要素<p>指定した要素の最後の子ノードとして挿入する</p>
を指定しています。
$('#append').append('<p>指定した要素の最後の子ノードとして挿入する</p>');
指定した要素の直後に挿入する
jQueryでの指定した要素の直後に挿入するにはafter
メソッドを使用して下記のように記述します。
下記では追加・挿入先である#after
が付与されている要素を指定し、after
メソッドの引数(content)にDOMツリーに挿入するHTML要素<p>指定した要素の直後に挿入する</p>
を指定しています。
$('#after').after('<p>指定した要素の直後に挿入する</p>');
注意
jQueryが動作しないけどなんでだろうという時はまずjQueryが読み込まれているか確認してください。
読み込まれていない場合は公式サイトからダウンロードしてサイトに追加して読み込むか、CDN経由でjQueryライブラリを読み込ませましょう。
CDN経由の場合は実行させたい今回記述したjQueryより前の箇所に下記コードのように(jQuery CDN公式サイトより引用)追記しましょう。
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
jQuery公式サイト
各種CDNの公式サイト
まとめ
今回は「JavaScript・jQueryによる要素を追加・挿入する方法」について簡単にはなりますが、JavaScript・jQueryでの記述方法を説明させていただきました!
複数のメソッドがでてきたので、知らなかった方やもっと詳しく知りたいという方は下記の外部サイトが参考になるかなと思いますので参考にしてみてください。
参考サイト
JavaScript
jQuery
before
prepend
append
after
最後にもう一度ポイントをおさらい
JavaScript
insertAdjacentElementとは?
insertAdjacentElement
はElement
インターフェイスのメソッドで、呼び出された要素から相対的に指定された位置に、指定された要素ノードを挿入します。
insertAdjacentElement
メソッドを使用することで、第一引数(position)に下記文字列を指定することで簡単に結果を得ることができるようになります。
下記第一引数(position)を必要に応じて記述して使い分けましょう。
position名 | 説明 | 記述例 |
---|---|---|
beforebegin | 指定した要素の直前に挿入 | elements.insertAdjacentElement('beforebegin', newElement); |
afterbegin | 指定した要素の最初の子ノードとして挿入 | elements.insertAdjacentElement('afterbegin', newElement); |
beforeend | 指定した要素の最後の子ノードとして挿入 | elements.insertAdjacentElement('beforeend', newElement); |
afterend | 指定した要素の直後に挿入 | elements.insertAdjacentElement('afterend', newElement); |
※上記のいずれかの文字列と一致する必要があります
「position」の挿入位置の視覚化
<!-- beforebegin -->
<p>
<!-- afterbegin -->
position
<!-- beforeend -->
</p>
<!-- afterend -->
今回のJavaScriptの記述例まとめ
(function () {
document.addEventListener('DOMContentLoaded', function () {
// 挿入する新しい要素を作成
let newElement = document.createElement('p') ; // 「<p></p>」を作成
newElement.textContent = '挿入テキスト'; // 「<p>挿入テキスト</p>」のようにテキスト追加
// 指定した要素の直前に挿入する
document.querySelectorAll('#before')[0].insertAdjacentElement('beforebegin', newElement);
// 指定した要素の最初の子ノードとして挿入する
document.querySelectorAll('#prepend')[0].insertAdjacentElement('afterbegin', newElement);
// 指定した要素の最後の子ノードとして挿入する
document.querySelectorAll('#append')[0].insertAdjacentElement('beforeend', newElement);
// 指定した要素の直後に挿入する
document.querySelectorAll('#after')[0].insertAdjacentElement('afterend', newElement);
}, false);
}());
※「document.addEventListener(‘DOMContentLoaded’, function () {〜}, false);」の部分はDOMが読み込まれたら内部を処理しての記述例になります
「(function () {〜}());」の部分は即時実行関数(グローバル汚染対策)になりますので不要な場合は削除してください
jQuery
メソッド名 | 説明 | 記述例 |
---|---|---|
before | 指定した要素の直前に挿入 | elements.before('<p>挿入要素</p>'); |
prepend | 指定した要素の最初の子ノードとして挿入 | elements.prepend('<p>挿入要素</p>'); |
append | 指定した要素の最後の子ノードとして挿入 | elements.append('<p>挿入要素</p>'); |
after | 指定した要素の直後に挿入 | elements.after('<p>挿入要素</p>'); |
各メソッドの挿入位置の視覚化
<!-- before -->
<p>
<!-- prepend -->
position
<!-- append -->
</p>
<!-- after -->
今回のjQueryの記述例まとめ
$(function () {
// 指定した要素の直前に挿入する
$('#before').before('<p>指定した要素の直前に挿入する</p>');
// 指定した要素の最初の子ノードとして挿入する
$('#prepend').prepend('<p>指定した要素の最初の子ノードとして挿入する</p>');
// 指定した要素の最後の子ノードとして挿入する
$('#append').append('<p>指定した要素の最後の子ノードとして挿入する</p>');
// 指定した要素の直後に挿入する
$('#after').after('<p>指定した要素の直後に挿入する</p>');
});
- JavaScriptで記述する場合は最初に挿入する要素を作成する必要がある
- insertAdjacentElementメソッドは指定の文字列と一致する必要がある(大文字小文字の区別なし)
※指定の文字列の詳細はpositionの表を参照 - jQueryではなくJavaScriptで記述する場合はメリットとしてjQueryライブラリを読み込んでいなくても処理が実行可能!
- jQueryで処理をする場合は、短い処理で記述できることや学習コストが少なくすむなど便利な事が多いので、特に初心者の方はjQueryで処理を記述していく方がオススメ!
- 対応ブラウザなどその時の対応環境で利用可能(メソッドなど)なものか「MDN公式サイト」や「Can I use…」などで調べて実装するように注意しましょう
初心者向けで簡単な説明でしたが上記内容も踏まえまして、是非自身でのプログラミングにも役立てて頂けると幸いです。