getElementByIdで要素を指定した後、タグ内に任意のタグを追加する方法

Question

宜しくお願い致します。

getElementByIdで要素を指定した後、タグ内に任意のタグを追加する方法がわかりません。

■やりたいこと

処理前

<select name="category" class="input-select">			
<option id="level-0" value="5">5</option>
<option id="level-1" value="10">10</option>
</select>

処理後

<select name="category" class="input-select">			
<option id="level-0"　class="new1" selected="selected"value="指定しない">指定しない</option>

↑ class="new1" をタグ内に追加

<option id="level-1 value="りんご">りんご</option>

↑ v-model="new2" をタグ内に追加

</select>

■考えているコード

    const set1 = 'class="new1"';
    const set2 = 'v-model="new2"';
    
    document.getElementById('level-0').タグ内に挿入する為のコード = set1;
    document.getElementById('level-1').タグ内に挿入する為のコード = set2;

Comments

[mouse_484]

タグにはVue.jsとReactがついていてコードを見る感じVueのようです

多分Vue.jsだと思いますがどちらか明確にしてタグと質問を編集してください

[bangkok01]

すみません、タグははずしました。挿入したい文字列はvueのタグですが、文字列としてタグ内に挿入できるのか確認をしたいです。

Answer 1

<select name="category" class="input-select">            
    <option id="level-0" value="5" :class="{new1:hoge}">5</option>
    <option id="level-1" value="10" :class="{new2:hoge}">10</option>
</select>

の用にするとhoge=trueの場合のみclassが追加されます

初期は hoge = falseにして処理が始まった時にhoge = trueにすれば思った動作ができると思います

Comments

[bangkok01]

丁寧にご説明を頂きありがとうございます。
教えて頂いたコードで思った動きが確認できそうです！ありがとうございます。

Answer 2

ご回答を頂き誠にありがとうございます。
実は、システムの関係で初期の段階でoptionタグ内に構文を入れておくことができず、ブラウザ読み込み時に、上記で書いたタグを入れたいと考えております。

説明不足ですみませんでした。

Comments

[mouse_484]

始めからhogeの場所にtrueを入れておけば大丈夫です