4/5 jsコードレシピ集 学習 classList.add textContent innerHTML

要素にクラスを追加
要素.classList.add(追加したいクラス)

要素のテキストを取得
要素.textContent

要素のテキストをXXXXXで書き換え
要素.textContent = "XXXXX"

要素のHTMLをYYYYYで書き換え
innerHTML = "YYYYY"

textContentはテキストのみ取得するが、innerHTMLはHTMLを取得出来るので、cssの操作も可能。

js

// weather要素を取得
const weatherElement = document.getElementById('weather');

// クリックしたらイベント発火
weatherElement.addEventListener('click', () =>
{
  // weather要素にnew-classというクラスを追加
  weatherElement.classList.add('new-class');
  
  // weather要素のテキストを書き換える
  weatherElement.textContent = "気温は<strong>66℃</strong>になる予定です"

  // アラートでweather要素のテキストを表示
  alert(weatherElement.textContent);
  // #出力結果 = 気温は<strong>66℃</strong>になる予定です

  // weather要素のHTMLを書き換え、テキストを太字にするstrongタグを追加する
  weatherElement.innerHTML = "気温は<strong>66℃</strong>になる予定です";
// #出力結果(太字、背景が黄緑) = 気温は66℃になる予定です
});

html

<p id="weather>今日は猛暑です<p>

css

.new-class {
  background-color: greenyellow;
}