InnerTextとinnerHTMLを使用してJavaScriptでDOMを操作する

最近では、フロントエンドフレームワークが大流行しています。仮想DOMの操作は、はるかに効率的ですが、既存の静的ページのいくつかの要素を微調整するだけの場合、大量のオーバーヘッドになる可能性があります。幸い、JavaScriptには、要素のテキストと要素内のHTMLを非常に簡単に編集できるメソッドがいくつか付属しています。

そのReact、Angular、Vue、そして私が言及しなかったホットな新しいフレームワークを取り上げてください！

入門

自宅でフォローするには、Webブラウザと操作するページだけが必要です。

簡単にするために、任意のWebページをロードし、ブラウザーのコンソールを開いて、独自のHTMLドキュメントでオーバーライドすることができます。

document.getElementsByTagName('body')[0].innerHTML = '<div id="gator">Alligators rule!!</div>';

Enterキーを押すと、既存のページが完全に少量のHTMLと、みんなのお気に入りの爬虫類に関する普遍的な真実に置き換えられます。

テキストの編集

さて、はじめにのセクションでは、銃を飛び越えて、すでにinnerHTMLを使用してページ上のいくつかの要素を操作しました。

少しバックアップするために、ページ上の要素のテキストを変更することから始めましょう。そのためには、要素を選択してから、innerTextを使用してコンテンツを設定する必要があります。

document.getElementById('gator').innerText = 'OF COURSE alligators rule!';

あまりありません！

既存のテキスト文字列の前にテキストを追加する場合は、innerTextを使用して現在のテキストを取得し、その前に追加できます。

const currentText = document.getElementById('gator').innerText;
const nextText = 'Do alligators rule? ' + currentText;
document.getElementById('gator').innerText = nextText;

+=を使用できるため、テキストの追加はさらに簡単です。

document.getElementById('gator').innerText += ' This definitely true.';

HTMLの編集

これはすべてうまくいっていますが、<strong>で文字列をラップするなど、HTMLを導入しようとすると、事態は崩壊します。

innerTextは要素のテキストコンテンツで機能するため、<および>が<としてエンコードされているかのように、HTMLタグなどが表示されます。および>。

ただし、大したことではありませんが、文字列で追加のマークアップを使用する場合は、innerTextをinnerHTMLに交換して、次の手順を実行するだけです。

document.getElementById('gator').innerHTML = '<strong>OF COURSE</strong> alligators rule!';

また、innerHTMLと同様に、値をキャプチャして追加し、+=を使用して追加できます。

const currentHTML = document.getElementById('gator').innerHTML;
const nextHTML = 'Do alligators rule? ' + currentHTML;
document.getElementById('gator').innerHTML = nextHTML;

document.getElementById('gator').innerHTML += ' This definitely true.';

それだけではありません。innerHTMLを使用すると、要素のテキストを編集する以上のことができます。 HTMLテーブルの場合のように、これを使用してマークアップを追加することもできます。

document.getElementById('gator').innerHTML = `
  <table border="1">
    <thead>
      <tr>
        <th>Reptile</th>
        <th>Awesomeness</th>
      </tr>
    </thead>
    <tbody id="tableRows">
      <tr>
        <td>Alligator</td>
        <td>9001</td>
      </tr>
    </tbody>
  </table>
`;

その後、innerHTMLを使用して、新しい行をその場でテーブルに追加できます。

document.getElementById('tableRows').innerHTML += `
  <tr>
    <td>Snake</td>
    <td>-1</td>
  </tr>
`;

結論

もちろん、innerTextとinnerHTMLを使用しても、仮想DOMを活用するフロントエンドフレームワークの能力には近づきませんが、それで仕事は終わります。

幸いなことに、JavaScriptで要素を編集するために利用できる唯一のオプションがinnerHTMLであった時代は過ぎ去りました。私たちは長い道のりを歩んできましたが、些細な問題でフレームワーク全体を投げ出さないように、これらのことを知っておくのは常に良いことです。