Written by Kasumi

JavaScriptでHTMLタグに属性を追加する方法

JavaScriptでHTMLタグに属性を追加したい。

本記事ではこのような悩みを解決。

実装方法について解説します。

setAttributeメソッドで属性を追加

// HTMLのbuttonタグを指定
const btn = document.querySelector('button');
// buttonタグにtype属性を追加
btn.setAttribute("type","submit");

JavaScriptでHTMLタグに属性を追加するコード例です。

buttonタグにtype属性を付与。

属性値にsubmitを追加してます。

属性の追加にはsetAttributeメソッドを使います。

setAttributeメソッドの使い方は以下の通りです。

属性を追加するHTML要素.setAttribute(“属性”,”属性値”);

属性を追加する要素にチェーンメソッドでsetAttributeを連結。

setAttributeの第一引数に属性名

第二引数に属性の値を追加します。

以上で属性の追加が完了です。

まとめ

JavaScriptでHTMLタグに属性を追加する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

【JavaScript】fetchメソッドを使ってJSONを非同期で読み込み・HTMLに出力する方法

2023.01.02
1734
JavaScript

【JavaScript】setTimeoutが効かない。よくあるパターンの対処方法

2022.12.05
3135
JavaScript

【簡単】JavaScriptを使って任意の文字列を置換する方法

更新日:2022.09.09
460
JavaScript

【JavaScript】Local Storageに複数のデータをJSON形式で保存。配列で取得する方法

2022.11.20
1853