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でスマホ画面をタップした時のイベントを検知する方法

2022.11.15
2491
JavaScript

JavaScriptで親・兄弟のID・クラス・要素名を取得する方法

2023.01.21
3695
JavaScript

【JavaScript初心者向け】繰り返し処理を使い、配列要素を展開する方法

2022.08.24
703
JavaScript

【JavaScript初心者向け】文字列・配列の要素数を調べる方法

2022.08.23
674