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

JavaScriptでタグにテキストを設定する方法

Webページ上のテキストを動的に書き換えたい場面は多くあります。この記事では、jQueryを使用して<strong>タグ内のテキストをJavaScriptで変更する方法を、手順とコード例とともにわかりやすく解説します。

手順1：<strong>要素を用意する

まず、HTML内にテキストを差し替えたい<strong>要素を配置します。後からJavaScript側でこの要素を指定できるよう、id属性を付けておくのがポイントです。

<strong id="strongDemo">Replace This strong tag</strong>

手順2：idセレクターでテキストを書き換える

次に、先ほど設定したid属性を「#（シャープ）」を使ったidセレクターで指定し、jQueryのhtml()メソッドで新しいテキストを設定します。

$(document).ready(function(){
  $("#strongDemo").html("Actual value of 5+10 is 15.....");
});

$(document).ready()は、DOMの読み込みが完了した時点で処理を実行するための記述です。これにより、HTMLが完全に描画されてからテキストの置き換えが行われるため、意図しないエラーを防げます。

サンプルコード全体

以下は、HTMLファイル全体のコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<strong id="strongDemo">Replace This strong tag</strong>
<script>
  $(document).ready(function(){
    $("#strongDemo").html("Actual value of 5+10 is 15.....");
  });
</script>
</body>
</html>

プログラムの実行方法

上記のコードを実行するには、ファイル名を「anyName.html（例：index.html）」として保存し、そのファイルを右クリックします。VS Codeエディターの場合は、「Open with Live Server（Live Serverで開く）」オプションを選択すると、ブラウザー上ですぐに結果を確認できます。

実行結果

プログラムを実行すると、以下のような出力が得られます。

JavaScriptで strong タグにテキストを設定する方法

補足：text()メソッドとの違い

同様の目的にはtext()メソッドも使えます。html()はHTMLタグを含む文字列をそのまま描画するのに対し、text()は渡した文字列をプレーンテキストとして表示します。単純に文字だけを入れ替えたい場合はtext()、マークアップごと差し替えたい場合はhtml()を使い分けるとよいでしょう。

  1. JavaScriptでテキストを切り替える（トグルする）方法を解説

    JavaScriptを使えば、ボタンをクリックするたびに表示されるテキストを切り替える（トグルする）処理を簡単に実装できます。ここでは、innerHTMLプロパティと条件分岐を組み合わせた、最も基本的なテキスト切り替えの方法をサンプルコード付きで解説します。実装コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>  

  2. JavaScriptでinnerHTMLを設定する方法をわかりやすく解説

    JavaScriptでHTML要素の内容を動的に書き換えたい場合に便利なのが、innerHTMLプロパティです。innerHTMLを使えば、指定した要素の中にHTML文字列をそのまま挿入・置き換えることができます。本記事では、innerHTMLを設定する正しい構文と、実際に動作するサンプルコードを初心者向けに解説します。 innerHTMLを設定する正しい構文 innerHTMLを設定する際の正しい構文は以下のとおりです。 document.getElementById(yourIdName).innerHTML=yourValue; この構文では、まずgetElementById()メソッド