JavaScript - 文法 - テキストを動的に変更する




クラウディア　












1.　概要						


2.　テキストを動的に変更する	


3.　やってみる				


4.　参考サイト				




1.　概要


　表題の「テキストを動的に更新する」なんてのは、「JavaScript」の専売特許みたいなもんですな。


2.　テキストを動的に変更する


　コンテンツの方で。



<!DOCTYPE html>
<html>
<head>
<title>Spanにテキストを入れる</title>
</head>
<body>

 <p>
    ID付きのspan要素:
    <span id="mySpan"></span>
 </p>
 <script>
const mySpanElement = document.getElementById('mySpan');

mySpanElement.textContent = 'これは textContent で挿入したテキストです。';
 </script>
</body>
</html>



　てな書き方をすれば、「<span id="mySpan"></span>」の箇所に、「これは textContent で挿入したテキストです。」ちゅうのが表示されるわけです。
　これは、「textContent」というプロパティを使用していますが。
　「innerText」というプロパティを使って、下記のように書いたり。



mySpanElement.innerText = 'これは innerText で挿入したテキストです。';



　「innerHTML」というプロパティを使って、下記のように書いたりもできます。
　「innerHTML」の場合、「HTML」のタグを使えるわけです。



mySpanElement.innerHTML = 'これは <b>innerHTML</b> で挿入したテキストです。';




3.　やってみる


　下記のスクリプトと。



function myFunc(messeage)
{
	const mySpanElement = document.getElementById('result');
	mySpanElement.textContent = messeage;
}



　下記のコンテンツを記述します。



<form action="">
<input class="page" type="button" value="ボタン１" onclick='myFunc("ボタン１を押しました")'>
<input class="page" type="button" value="ボタン２" onclick='myFunc("ボタン２を押しました")'>
</form>
<span id="result" style="border: 2px solid #333; width: 16px; padding: 2px;">　　　　　　　　</span>



　それが下記の表示になります。


　　
　　


　　　　　　　　　　

　上記の「ボタン１」「ボタン２」を押すと、枠内の文字が動的に変化することがわかるかと思います。


4.　参考サイト


　本ページは、「Google」大先生を参考にさせていただきました。





AbemaTV　無料体験