jQueryでHTML要素を操作する

はじめに

こんにちはプログラマー2年目の塚田と申します。
今回はJavaScriptでのHTML要素を操作する方法について、
お仕事で使ったものを中心に書いていこうと思います。
※jQueryを使った書き方がメインになります。

attr()を使う方法

HTML

<p id="qiita">こんにちは</p>

JS

// class属性の追加
$("#qiita").attr("class","test");

// class属性取得
let get = $("#qiita").attr("class");
→test

// class属性の変更
$("#qiita").attr("class","newTest");

// class属性を再度取得
let get = $("#qiita").attr("class");
→newTest

data()を使う方法

HTML

<p id="qiita">こんにちは</p>

JS

// class属性の追加
$("#qiita").data("class","test");

// class属性取得
let get = $("#qiita").data("class");
→test

// class属性の変更
$("#qiita").data("class","newTest");

// class属性を再度取得
let get = $("#qiita").data("class");
→newTest

attr()とdata()の違い

方法	メリット	デメリット
attr("属性名")	どんな属性でも統一的に動作できる	data属性にはdata()のほうが便利
data()	data属性を簡単に操作できる	HTMLのdata-**に即時反映されない場合がある

カスタムデータ属性を操作するならばdata()を使うとよいですが、すべての属性を一括で操作するならばattr()も選択肢になります。

おわりに

今回はJavaScriptでのHTML要素を操作する方法について書いてみました。
今後も学んだ事を書いていこうと思います。
以上、塚田でした