Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptのinnerHTMLとinnerText：ガイド

サイトをよりインタラクティブにするために、ページに表示されるテキストまたはHTMLを変更する方法を知る必要があります。ここでinnerText およびinnerHTML HTML属性が入ります。

これらの属性を使用すると、DOM要素のテキストとそのHTMLコードを簡単に変更できます。このガイドでは、JavaScriptの innerTextの使用方法を学習します。 およびinnerHTML 属性。

JavaScriptのinnerHTMLとは何ですか？

JavaScriptのinnerHTMLプロパティは、Webページ上の要素のHTMLコンテンツを設定します。 InnerHTMLは、HTMLDOMのプロパティです。 innerHTMLは、

要素のコンテンツを設定および変更するためによく使用されます。

次のようにinnerHTMLを使用できます：

document.getElementById（ "paragraph"）。innerHTML ="Career Karma！";

このコード行は、「paragraph」

要素の内容を「CareerKarma！」に設定します。 getElementById（）メソッドは、そのIDによって要素を取得します。

ブラウザは、ページの読み込み時にドキュメントオブジェクトモデル（DOM）を定義します。このDOMは、ページに表示される一連のオブジェクトです。

DOMは、Web要素を変更するたびにHTMLコードを変更する必要がないことを意味します。 DOMとJavaScriptを使用して、特定のセッションでのページの表示方法を変更できます。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

JavaScriptのinnerTextとは何ですか？

JavaScriptのinnerTextプロパティは、要素のテキストコンテンツを設定します。また、その子孫の内容を設定します。子孫には、段落内にタグを含めることができます。

innerTextの構文は、innerHTMLの構文と似ています：

document.getElementById（“ element”）。innerText="これはテストです。";

これにより、IDが「element」の要素のテキスト値が「Thisisatest」に設定されます。

これらのメソッドをテストするには、JavaScriptコンソールに移動し、変更する要素を選択します。

これにより、Webページの最初の

HTMLタグの内容が変更されます。テキストを置き換える場合は、 innerTextを使用できます。 属性：

これにより、ページの2番目の段落（番号1で示される）の内容が「これはテストです」に変更されます。

JavaScriptでinnerHTMLとinnerTextを使用する

Webページのテキストを変更することから始めましょう。簡単なフラッシュカードのWebページを作成します。このWebページには、HTMLに関する質問が表示されます。ボタンをクリックすると、HTMLに関する質問への回答が表示されます。

Webページを作成する

最初のステップは、フロントエンド用のindex.htmlファイルを作成することです：

<!DOCTYPE html>
<html>
    <head>
   	 <title>HTML Flashcard App</title>
	<link rel="stylesheet" href="./styles.css" />
    </head>
    <body>
   	 <div class="flashcard">
   		 <h2>Does a hyperlink only apply to text?</h2>
   		 <p>The answer will be revealed when you press "Show answer"</p>
   		 <button id="showAnswer">Show answer</button>
		 <br /> <br />
		 <div id="showMessage"></div>
   	 </div>
	<script src="./scripts.js"></script>
    </body>
</html>

このページでは、3つのコンポーネントでコンテナを作成します。まず、ユーザーに尋ねている質問があります。答えを明らかにする方法についてのメッセージがあります。私たちのページは答えを明らかにするためのボタンで終わります。

コードは要素のテキストコンテンツを返します：

JavaScriptのinnerHTMLとinnerText：ガイド

ページをより美しくするために、styles.cssファイルにいくつかのCSSスタイルを適用します。

<style>
.flashcard {
    margin: auto;
    width: 50%;
    padding: 50px;
    margin-top: 10%;
    background-color: lightgreen;
    text-align: center;
}

button {
    border: none;
    background-color: hotpink;
    padding: 10px;
    border-radius: 10px;
}
</style>

それでは、私たちのWebページを見てみましょう。

JavaScriptのinnerHTMLとinnerText：ガイド

私たちのサイトは、フラッシュカードのように見えるものを示しています。ボタンのスタイルを設定しました。

JavaScriptのinnerHTMLとinnerTextを使用してテキストを変更する

ボタンがクリックされたときに質問の答えが明らかになるようにします。まず、JavaScriptコードで使用するテキスト要素とボタン要素を選択します。このすべてのコードをscripts.jsファイルに記述します：

var answerText = document.querySelector('p');
var button = document.querySelector('button');

次に、JavaScript関数を作成します。この関数は、ボタンがクリックされたときに私たちの質問に対する答えを明らかにします：

function showAnswer() {
	answerText.innerText = "No. Hyperlinks can be used on both text and images.";
}

ボタンを押すだけで関数をアクティブにするために、簡単なイベントリスナーを作成します。このリスナーは、ボタンのクリックをリッスンします：

button.addEventListener('click', showAnswer);

フラッシュカードアプリの設定が完了しました。 Webページを表示して[回答を表示]ボタンをクリックすると、段落内のテキストが変更され、回答が表示されます。

JavaScriptのinnerHTMLとinnerText：ガイド

JavaScript innerHTML を使用して、このアプリに機能を追加することができます 。ボタンがクリックされたら、フラッシュカードの下部にメッセージを表示したいとします。このメッセージは赤で表示されます。次のコードを使用してこのメ​​ッセージを作成できます：

var message = document.querySelector('#showMessage');

function showAnswer() {
	answerText.innerText = "No. Hyperlinks can be used on both text and images.";
	message.innerHTML = "<span style='color:red;'>You have revealed the answer.</span>";
}

改訂されたshowAnswer（）を使用してコードを実行してみましょう 関数と私たちが書いた新しいクエリセレクター：

JavaScriptのinnerHTMLとinnerText：ガイド

innerHTMLを使用しました HTMLのタグをサイトに追加するメソッド。このタグは、ユーザーが回答の表示ボタンを押すと赤で表示されるメッセージを表示します。

JavaScriptinnerTextとinnerHTML

innerTextプロパティとinnerHTMLプロパティの両方を使用すると、タグのコンテンツにアクセスして変更できます。 innerTextは、子孫やスペースを含まないテキストを返します。 innerHTMLは、子孫と間隔を含むテキストを返します。

要素の内容をプレーンテキストで表示する場合は、innerTextを使用します。文字列に表示されるすべてのHTMLタグを表示する場合は、innerHTMLを使用する方が適切です。

つまり、innerTextを使用するとプレーンテキストを操作できますが、innerHTMLを使用すると文字列内のHTMLを操作できます。

innerTextとinnerHTMLはどちらも、最新のブラウザで幅広くサポートされています。

結論

innerText およびinnerHTML プロパティはHTMLDOMを操作します。 innerTextは、間隔や子孫なしで要素のテキストコンテンツを再調整します。 innerHTMLは、要素のコンテンツと、間隔および子孫を返します。

ボーナスチャレンジとして、ボタンを2回クリックしたときに、上記のコードで回答を非表示にできるかどうかを確認してください。コードは次のようにする必要があります：

  • ユーザーがボタンをクリックしたときに回答を非表示にする
  • 回答が表示されているときに、ボタンのテキストを「回答を表示」から「回答を非表示」に変更します。
  • ユーザーが[回答を非表示]を押した後も、「回答を公開しました」というメッセージを表示し続けます。

JavaScriptの学習に役立つチュートリアルをさらに探している場合は、JavaScript初心者向けの最高のチュートリアルガイドをご覧ください。


  1. JavaScriptでinnerHTMLを設定する

    innerHTMLを設定するための正しい構文は次のとおりです- document.getElementById(“yourIdName”).innerHTML=”yourValue”; 次に、innerHTMLを設定する方法を見てみましょう- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=&

  2. ベストガイド：MacOSXでのPageUpおよびPageDown

    Windowsコンピュータでは、すべてのキーボードにPage Up / Page Downキーが付属しており、個別のキーであるか、Fn（ファンクション）キーに組み込まれています。 ページアップ およびPageDown キーは時間を節約し、多くのページでドキュメント関連のタスクを読んだり、編集したり、実行したりするときに非常に便利です–これらのキーを使用すると、次/前のページにすばやくジャンプできます。 フルMacキーボードでは、Page Up /PageDownキーがあります。他のMacキーボードでは、この機能を実現するには、Fnキーと上下の矢印キーを使用する必要があります。 ただし