matchMediaによるテキストの切り替えの書き方について

Question

単純にブレイクポイントによるテキスト切り替えをしたいのですが、もう少しスマートな書き方がしたく。
他のjsでの記述方法あれば教えて頂ければ幸いです。
※諸事情でcssでのだし分けができないのでcssでの案はご遠慮下さい

document.addEventListener('DOMContentLoaded', function() {
  if (window.matchMedia( '(min-width: 992px)' ).matches) {
  const targetElement = document.querySelector('.js-h2');
  const HtmlDoc = `
テキストテキスト
  `;
  targetElement.insertAdjacentHTML('beforeend', HtmlDoc);
  }else {
  const targetElement = document.querySelector('.js-h2');
  const HtmlDoc = `
テキストテキスト
  `;
  targetElement.insertAdjacentHTML('beforeend', HtmlDoc);
  }
});

      <h2 class="js-h2"</h2>

Answer 1

質問文のコードのままで十分スマートだと思います。
コードを短くしたいなら、3項演算子を使うとか重複コードを書かないとかする余地はありますね。

  document.querySelector('.js-h2').insertAdjacentHTML('beforeend',
      matchMedia( '(min-width: 992px)' ).matches ? `テキスト1` : `テキスト2`);

Comments

[nanashissss]

ありがとうございます。