アコーディオンメニューの動的変更の仕方

Question

leafletでプラグインでメニューsidebar-v2を使用しています
（https://kita-note.com/leaflet-plugin-sidebar-v2）
添付図の様にアコーディオンメニューを作りましたが
地域表示はそのままで、リスト中身表示(表示のみ）を変えたいと考えています

カテゴリー毎にアイコンを変える、クリックイベントの有無、テキストの文字色
（カテゴリーはアイコンの種類に区分します）

そこでこれらを実現するには、
[1]リストを削除して、その都度作成する（簡単に作成可能）
[2]アコーディオンメニューをループして書き換える（コードが未作成）
この方法のどちらが、現実的でしょうかご指示ください。
因みに、リスト数は1000以内程度と変更クリックはユーザーによるクリックです

補足　リスト内容

<ul class="acMenu3"> <li><a><a href="javascript:myclick(0)" ><img src="./images/michinoeki.png" >うたしない</a></a></li> <li><a><a href="javascript:myclick(1)" ><img src="./images/michinoeki.png" >しんしのつ</a></a></li> <li><a><a href="javascript:myclick(2)" ><img src="./images/michinoeki.png" >むかわ四季の館</a></a></li> <li><a><a href="javascript:myclick(3)" ><img src="./images/michinoeki.png" >鐘のなるまち・ちっぷべつ</a></a></li> <li><a><a href="javascript:myclick(4)" ><img src="./images/michinoeki.png" >サンフラワー北竜</a></a></li> </ul>

書き換えしたい内容
href="javascript:myclick(0)" 　⇔　href=""
src="./images/michinoeki.png"　⇔　src="./images/michinoeki.png2"　
テキスト白色　⇔　テキスト別色

Answer 1

今回は[1]の方法で解決とします

Answer 2

どちらの方法でも実現は可能な気がしますが、パフォーマンスを考えると毎回リスト全体を書き換えるよりも変更が入る項目のみを書き換える方が望ましいとは思います。

Comments

[shin0859]

TsuyoshiIwanaga様　回答ありがとうございます
パフォーマンス的に[2]でしょうか？

その後考えたのですが、[1]はメモリー上でリストを作り終えた後で一気に読み込ませます
　var container = document.getElementById('acMenu');
container.insertAdjacentHTML('afterbegin', tmp);

[2]は表示リストをループして修正すると考えますが
　（下記のコードでは修正できませんが）
$('.acMenu3 li').each(function(i, val) {
　　//console.log(i);
console.log($(val).text());
})

その様な考えが正しければ[1]の方が早い様な気がします
[2]の方がベターと考えるなら、手掛かりになるコードを教えていただければ助かります。

ちなみに再度挙げますが、
<li><a><a href="javascript:myclick(0)" ><img src="./images/michinoeki.png" >うたしない</a></a></li>　に於いてimgのアドレスを検索キーとして、質問最後の「書き換えしたい内容」を
実現できるコードをご教授いただければ助かります。
よろしくお願いいたします。
（簡単に考えると、lili間のhmltをキーで検索して、一部のhmltを置き換るコードなんですが...）

[tsuyo_244]

[1]のようにリスト全体を書き換えるのではなく、[2]のアコーディオンメニューをループで回す方法であっても、HTMLの書き換えを最後に1度だけ行うというのは可能だと思います。（ループ内でDOMを更新するのでなく、ループの外で要素を書き換えるようにします）
以下が参考になりそうでしょうか？
https://tinybeans.net/blog/2010/11/14-000851

追加の内容についてですが、例えばすべての項目で末尾に2をつけるルールであれば
imgのアドレスを検索キーとする必要もないかもしれません。
(クリックされたときに、その要素のsrcの末尾に機械的に2をつける処理をすればよいのかなと)
src="./images/michinoeki.png"　⇔　src="./images/michinoeki.png2"

[shin0859]

お返事有難うございます。
参考のサイトを見ましたが、<ul id="result">に追加する内容になっています
今回は要素は追加しないで、要素の中身をキー文字で判別して、その要素を変更したいと考えています。
それを実現出来る参考サイトが御座いましたら、お知らせください。

下記のコードしか見つけられませんでしたが、
これですと"acMenu3"の塊しかhtmlを取得できませんでした。
var tmp = document.getElementsByClassName("acMenu3");
for (var i = 0; i < tmp.length; i++) {
console.log($(tmp[0]).html());
}

[shin0859]

その後ですが、[1]の方法で作成しました。
パフォーマンス的にはまだ耐えられる処理スピードでした。
（時間は測っていませんが、いや測り方を知りませんので）

今回TsuyoshiIwanaga氏から意見を頂いて有難うございました。
しばらく回答待ち状態にしますので、何か意見が有りましたら
コメント願います。