HTML要素.setAttribute() 対応: DOM Level 1（1998）

element.setAttribute("属性名", "値");

<a id="link" href="#">リンク</a>
<img id="photo" src="" alt="">

var link = document.querySelector("#link");

// 既存の属性を上書きします。
link.setAttribute("href", "https://example.com");

// 新しい属性を追加します。
link.setAttribute("target", "_blank");
link.setAttribute("data-type", "external");

// 画像のsrcを設定します。
var img = document.querySelector("#photo");
img.setAttribute("src", "/img/photo.jpg");
img.setAttribute("alt", "風景写真");

『HTML要素.setAttribute()』はHTML要素の属性を設定するメソッドです。属性が存在しない場合は新規に追加され、すでに存在する場合は値が上書きされます。

属性の値を取得したい場合は『HTML要素.getAttribute()』を、削除したい場合は『removeAttribute()』を使用してください。

なお、『class』属性を操作する場合は『setAttribute("class", "...")』よりも『HTML要素.classList』を使用する方が安全です。『HTML要素.setAttribute()』で『class』を設定すると既存のクラスがすべて上書きされてしまいます。

『HTML要素.setAttribute()』はチュートリアル記事『id名で要素を特定してその属性を操作してみよう』で、より詳しく解説しています。良ければご覧下さい。