HTMLを編集できないときにJavaScriptで改行<br>を追加する方法

ウェブサイトを制作しているとHTMLを直接編集できない箇所に改行<br>を入れたいことがあります。そのような場合でもJavaScriptを使用して特定の要素に改行を追加することができます。この記事では、リンクテキストに特定の単語を含む要素に<br>タグを挿入する方法をご紹介します。

JavaScriptで改行を追加する方法

まず、次のようなHTMLのナビゲーションメニューがあったとします。

<nav class="navigation">
  <ol>
    <li><a href="#section1">セクション1</a></li>
    <li><a href="#section2">セクション2</a></li>
    <li><a href="#section3">セクション3</a></li>
    <li><a href="#section4">セクション4</a></li>
    <li><a href="#section5">セクション5改行メニュー</a></li>
    <li><a href="#section6">セクション6</a></li>
    <li><a href="#section7">セクション7</a></li>
  </ol>
</nav>

次に、JavaScriptを使用して特定のリンクテキストを検索し、その前に<br>タグを挿入します。

<script>
  window.onload = function() {
    var link = Array.from(document.querySelectorAll('.navigation a')).find(a => a.textContent === 'セクション5改行メニュー');
    if (link) {
      link.innerHTML = 'セクション5<br>改行メニュー';
    }
  };
</script>

コードの説明

1. window.onload – ページが完全に読み込まれた後にスクリプトを実行するためのイベントリスナーです。
2. Array.from(document.querySelectorAll(‘.navigation a’)).find(…) – .navigationクラス内のすべての<a>タグを配列として取得し、その中から特定のテキストを持つリンクを検索します。
3. innerHTMLプロパティ – テキスト内容を変更し、<br>タグを追加して改行を実現します。

結果

これにより、指定したリンクテキスト「セクション5改行メニュー」が「セクション5<br>
改行メニュー」となり、改行が適用されます。

終わりに

HTMLを直接編集できない場合でも、JavaScriptを使用して動的に内容を変更することができます。これにより、HTMLの変更が難しい状況でも、簡単に表示内容を調整することができます。