hidden と spanのdisplay:none

はじめに

JavaScriptでのみ利用する値をHTML上に保持したい。
そういう場合、私はhiddenを利用していました。

<input type="hidden" id="XXXX" name="XXXX" value="YYYY">

ある日、spanでも似たようなことできるよー、と教えて頂き別の手法を知ったので残します。

別の手法

spanタグにCSSでdisplay:noneを付与する。

<span id="XXXX" style="display:none">YYYY</span>

ポイント

1.spanは、インライン要素（divはブロック要素）
2.display:noneは、要素の表示を無くし、レイアウトに影響を与えない。

更に別の手法

hidden属性 でもいいのでは？ とコメントを頂き、初めて知ったので早速パターンを追加！
コメントをくださった @junerさん、有難うございます！

	<span id="XXXX" hidden>YYYY</span>

	<span id="XXXX" hidden="">YYYY</span>

	<span id="XXXX" hidden="hidden">YYYY</span>    

更にバージョンアップ

更にカスタム属性も使えば自由度が増すのでは？というコメントを頂いて、更にバージョンアップ！
@ffgogfb454 さん コメント有難うございます！

https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/data-*

<span id="XXXX" hidden data-a="YYYY" data-b="ZZZZ"></span>

const xxxx = document.querySelector("#XXXX");
xxxx.dataset.a; // "YYYY"
xxxx.dataset.b; // "ZZZZ"