ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

JavaScript:htmlの書き換え方法

選択肢によって、必須マークの表示/非表示を切り替えなければならなくなりました。
操作するhtmlは以下のようになっています。

<body>
  <p>
    <span class='require'>
      <img src='./require.gif' alt='必須'>&nbsp;
    </span>
    項目名
  </p>
</body>

f:id:AJYA:20181024124313p:plain
unsplash-logoDean Pugh

非表示は、.remove()か.empty()を使ってspanタグ内を消してしまえばできるだろうと検討をつけて試すと、.remove()では指定した要素ごと(spanタグごと)消えてしまいます。
.empty()では、指定したspanタグの子要素のみ削除されました。

$('.require').empty();


表示は、.html()を使って追加ができました。

$('.require').html("<img src='./require.gif' alt='必須'>&nbsp;");

.html()は、子要素として追加し続けるのだったら削除の操作が必要かと思いましたが、上書きされるので、削除は不要でした。
画像も表示されるのか心配でしたが、試したブラウザ全てで表示されていました。


表示/非表示を部分的に行うなら、.empty()と.html()を使う方法も便利だと思いました。