if文でのconsoleエラーが解消できない

Question

acces.htmlというページ以外で演算子を使用してacces.htmlでない場合以下の処理を行いたかったのですが、acces.htmlでconsoleエラーが表示されてしまい。解消したく、レクチャー頂ければ幸いです。

※querySelector取得してるclinic_infoという要素はacces.htmlは存在しません、。

window.addEventListener('DOMContentLoaded', () => {
  let url = location.pathname;
  if (url !== "acces.html") {
  const targetElement = document.querySelector('.clinic_info');
  const elm = document.createElement('div');
  elm.classList.add('js-mt70');  
  targetElement.insertAdjacentElement('beforebegin',elm);
  }
  //console.log(location.pathname)
});

エラーメッセージ

utils.js:322 Uncaught TypeError: Cannot read properties of null (reading 'insertAdjacentElement')

内容追記します。
acces.html以外のページにはclinic_infoというクラス名のdivタグが存在します。
こちらにjsでcreateElementでdivタグを生成し、クラス名js-mt70を付与して、clinic_infoの上に出力させます。
※やりかたがイケてない等あると思いますが、こちらでは無視してください。

<div class="js-mt7"></div>
<div class="clinic_info">text</div>

acces.htmlにはclinic_infoのdivタグが存在しないHTMLとなります。
acces.html以外はclinic_infoがあるので、acces.htmlでない場合はif文の処理を実行し、現在表示されてるコンソールエラーを解消したかったのです。
※恐らくclinic_infに対してinsertAdjacentElementしているのがエラーの原因かと思い。

※回答沢山ありがとうございました。
これから確認させていただきます。

Comments

[yambejp]

前回の質問を完全に無視ですか？
その条件だとlocation.pathnameとは合致しませんが・・・

ご利用のOS・ブラウザの種類とバージョンを追記ください

[maisumakun]

> ※querySelector取得してるclinic_infoという要素はacces.htmlは存在しません、。

この状況では、「どのように動作するように」したいのですか？

Answer 1

エラーを消すだけならば、これでどうでしょうか。(IE11などでは動作しないです)
targetElement?.insertAdjacentElement?.('beforebegin',elm);

Comments

[Lhankor_Mhy]

低評価した人、「問題の趣旨に沿っていない」という気持ちもわかるけど、URL参照して別処理をさせるなんてアドホックすぎると思います。
そのうち「acces2.htmlにも同じ処理を」とかになって、メンテのコストが上がりそう。

ですので、targetElement が null なら処理を飛ばした方が無難じゃないかな、という回答ですのでよろしくお願いします。
（低評価を取り下げてほしい、という話ではないです）

[nanashissss]

ご回答ありがとうございます。

Answer 2

  let url = location.pathname;
  if (url !== "acces.html") {

location.pathname は必ず / で始まっているため、このコードではどんなURLでも条件は成り立ちます。

  if (!url.endsWith("/access.html"))  {

でしょう。

Comments

[nanashissss]

ありがとうございます。

Answer 3

ご質問の内容についてはtargetElementが何もつかめなかったので
おそらくnullになっています。
つまりclinic_infoというクラスの付いたHTML要素が設定されていないのでしょう

動作確認用

<script>
window.addEventListener('DOMContentLoaded', () => {
  let url = location.pathname;
  if (url !== "acces.html") {
    const targetElement = document.querySelector('.clinic_info');
    const elm = document.createElement('div');
    elm.classList.add('js-mt70');  
    elm.textContent="test";
    targetElement.insertAdjacentElement('beforebegin',elm);
  }
});
</script>
<div class="clinic_info">clinic_info</div>

Comments

[nanashissss]

度々ご回答ありがとうございます。