【JavaScript】formにtype="hidden"のinput要素を追加する

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptでformにtype="hidden"のinput要素を追加する方法をご紹介しています。

JavaScriptでformにtype="hidden"のinput要素を追加したいな。良い方法ないかな?

上記の疑問にお答えします。

では、解説していきます。

formにtype="hidden"のinput要素を追加する方法

formtype="hidden"input要素を追加する方法はいくつかあります。本記事では3パターンの追加方法をご紹介していますので、ご自身の好みや環境にあわせて選択いただければと思います。

insertAdjacentHTMLでHTMLタグを追加する

ininsertAdjacentHTMLでHTMLタグを指定の位置に追加します。要素を追加するのとは若干ニュアンスが異なりますが、 HTMLタグを追加する方法で考えると一番使いやすいメソッドだと思います。

//ドキュメント上の最初のフォームを取得
const form = document.forms[0];

//form要素にtype="hidden"のinputタグを挿入
form.insertAdjacentHTML(
    'beforeend',
    '<input type="hidden" value="test">'
);

ininsertAdjacentHTMLでは第1引数でHTMLタグの挿入位置を指定します。指定することができる値は下記の通りです。

説明
beforebegin要素の直前にHTMLタグを挿入する
afterbegin最初の子要素の前にHTMLタグを挿入する
beforeend最後の子要素の後にHTMLタグを挿入する
afterend要素の直後にHTMLタグを挿入する

下記の記事で詳しく解説していますので、参考にしていただければ幸いです。

createElementで要素を生成して追加する

createElementで要素を生成し、setAttributeで属性を追加します。要素の追加する方法としてcreateElementは良く使用されます。createAttributeを併用することが多いですが、ここでは特定の要素にのみ属性を指定するためsetAttributeを使用しています。

//ドキュメント上の最初のフォームを取得
const form = document.forms[0];

//input要素を生成
const input = document.createElement('input');

//input要素にtype属性とvalue属性を設定
input.setAttribute('type', 'hidden');
input.setAttribute('value', 'test');

//form要素の末尾に挿入
form.appendChild(input);

Object.assign()で属性を設定する

前項の内容を少し変更し、属性をObject.assing()で設定してみます。Object.assign()はコピー元オブジェクト→コピー先オブジェクトに複数のプロパティをコピーすることができるメソッドです。扱いには注意が必要ですが、プロパティを列挙することができるため、一度に多くのプロパティを設定したりする処理に向いているメソッドです。

//ドキュメント上の最初のフォームを取得
const form = document.forms[0];

//input要素を生成
const input = document.createElement('input');

//input要素にtype属性とvalue属性を設定
Object.assign(input, {
    type: 'hidden',
    value: 'test',
});

//form要素の末尾に挿入
form.appendChild(input);

詳しい解説は下記ページをご参照ください。IE11やレガシーブラウザには対応していないので、その点ご留意ください。

参考:Object.assign() | MDN

最後に

本記事ではforminput要素を追加する方法を解説させていただきましが、forminput要素を追加するだけではなく、他の要素に追加する場合にも応用が利く方法です。 特にinsertAdjacentHTMLcreateElementは頻繁に使用するメソッドですので、使い方を覚えておくと良いかもしれませんね。

以上、JavaScriptでformにtype="hidden"のinput要素を追加する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

Adobe Creative Cloudのコンプリートプランを特別価格で手に入れよう!

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍