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

マウスでホバー出来る端末以外はCSSで装飾した:hoverを無効にする方法【メディアクエリで解決】

2022.12.27
241
JavaScript

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

2022.11.20
541
JavaScript

【JavaScript】マウスホイールした時のスクロール量を表示する方法

2023.02.07
29
JavaScript

scriptタグの読み込み・実行タイミングを変更する方法【defer / async属性を使おう】

2023.01.01
395