JavaScript で、HTML 構成を変更せよ 01

しばらく更新が遅れました。

2021年に入ってから、派遣元も変えて、派遣先が変わっておりました。
今度の派遣先、PHP を使わずに、CMS を開発してるチャレンジャーな所でして…。ちゅーか、PHP 使えんクソサーバ(以下略。。。（ワタクシ、アンチ Windows Server なので。）

CMS へ組み込む部分を担当していて、発生する事象がありまして。
タイトルになってます、HTML を JavaScript で書き換えろ、と。。。

とは言え、どれが一般的に良く使うもんなんかね？
というのがわからず。。。とりあえず、1つずつ挙げていってみましょう。

・class を追加する
※使い所；クリックした時に active というクラスを追加することで ON/OFF 表示を切り替える。

・併せて発生する JavaScript
※追加する箇所を指定する

一般的に出てくる、class を追加する jQuery
.addClass

$('.targetClassName'【or '#targetID'】).addClass('addClassName');

↑jQuery 紹介記事で、多いこのパターン。コレ出されても、できねーぢゃん、になる理由、わかって無いんですかねぇ。。。
●追加したい場所に、id, class が付いてるとは限らない。

なので、別途、追加する位置を特定する、ということが必要になってくる。
HTML を書き換えられるなら、苦労せんのよね〜。
HTML を触らない・触れない部分があるから、そもそも class 入れたいんちゃうんかなぁ、とか思うんだが。

というわけで、li の1つ目に、active 付けたい時。

$('#id01 .cls01 li:nth-child(1)').addClass('active');

で、コレも、script で囲んでも動かんよね。
jQuery, JavaScript 使ってりゃ、とーぜんやろ、ってスタンスなんやろーけどさー。
細かくいったら、発動させるタイミングも違うだろーよ、なんやろうけどね〜。
動く例を置いといて欲しいやん、探してる時って。

<ul class="cls01">
<li>項目01</li>
<li>項目02</li>
<li>項目03</li>
<li>項目04</li>
</ul>
<script>
$(function(){//該当 class 配下にある li の順番でページ別に指定
    $('.cls01 li:nth-child(1)').addClass('active');
});
</script>

て感じですかねぇ。
ま、このままだと、常時出てる状態やけどね。固定で class 追加したい時設定、てことで、まずはこんなところで。