JavaScript 変更テキスト
このチュートリアルでは、JavaScript の textContent プロパティと createTextNode() 関数を使用して要素のテキストを変更する方法について説明します。
JavaScript の textContent プロパティを使用して要素のテキストを変更する
要素の古いテキストを新しいテキストに置き換える場合は、ID またはクラス名を使用してその要素を取得する必要があります。その後、textContent プロパティを使用して古いテキストを新しいテキストに置き換えることができます。ID またはクラス名が指定されていない場合は、id または class 属性を使用して、要素に ID またはクラス名を付けることができます。ID またはクラス名が一意であることを確認してください。それ以外の場合、同じ ID を持つ要素も変更されます。たとえば、span タグを使用してテキスト要素を作成し、JavaScript の textContent 関数を使用してそのテキストを変更してみましょう。以下のコードを参照してください。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span id="SpanID"> Old Text </span>
<script type="text/javascript">
document.getElementById("SpanID").textContent="New Text";
</script>
</body>
</html>
出力：
New Text
JavaScript コードは上記のコードの HTML ファイル内に配置されていますが、必要に応じてそれらを分離することができます。ボタンをクリックするなど、テキストを変更する条件を指定することもできます。テキストを置き換えたくないが、古いテキストで新しいテキストを追加する場合は、以下の方法を使用できます。
JavaScript の createTextNode() 関数を使用して要素のテキストを変更する
新しいテキストに古いテキストを追加する場合は、ID またはクラス名を使用してその要素を取得してから、createTextNode() 関数を使用して、新しいテキストのノードを作成し、appendChild を使用する必要があります。() 機能古いテキストに新しいテキストを追加できます。ID またはクラス名が指定されていない場合は、id または class 属性を使用して、要素に ID またはクラス名を付けることができます。ID またはクラス名が一意であることを確認してください。それ以外の場合、同じ ID を持つ要素も変更されます。たとえば、span タグを使用してテキスト要素を作成し、JavaScript の createTextNode() 関数を使用してそのテキストを追加しましょう。以下のコードを参照してください。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span id="SpanID"> Old Text </span>
<script type="text/javascript">
Myspan = document.getElementById("SpanID");
Mytxt = document.createTextNode("New text");
Myspan.appendChild(Mytxt);
</script>
</body>
</html>
出力：
Old Text New Text
出力からわかるように、新しいテキストは古いテキストと連結されています。
