最近では、フロントエンドフレームワークが大流行しています。 仮想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の編集

これはすべてうまくいっていますが、文字列をラップするようにHTMLを導入しようとする瞬間 <strong>、物事はバラバラになります。

以来 innerText 要素のテキストコンテンツで機能し、HTMLタグなどが最終的に表示されるようになります。 <> としてエンコードされました &lt;&gt;.

大したことではありませんが、文字列で追加のマークアップを使用する場合は、スワップアウトするだけです。 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>
`;

結論

確かに、を使用して innerTextinnerHTML 仮想DOMを活用するフロントエンドフレームワークの能力には近づきませんが、ねえ、それは仕事を成し遂げます。

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