見出し画像

【JavaScript】getElementByIdとinnerHTMLの関係

関野泰宏

innerHTMLの例

innerHTMLというプロパティを使用すれば、要素の中身を変更できます。

サンプルプログラム

<html>
<head>
	<meta charset="utf-8">
</head>
<body>
  <p id="idchange">ここの文字を変更</p>
  <input type="button" value="クリックしてみる" onclick="myfunc()">
 
  <script>
   var myfunc = function(){
   var myp = document.getElementById("idchange");
   myp.innerHTML = "変更後の文字になります！";
   }
  </script>
</body>
</html>

実行結果


変更後の文字になります！

サンプルコードでは、innerHTMLプロパティを使用してpタグの中身を変更します。

ボタンをクリックすると、pタグ内の文字列が変更されます。

クリック前は「ここの文字を変更」と表示されていたものが、クリック後は「変更後の文字になります！」に変わりました。

プログラムダウンロード


もっとJavaScriptを学びたい人は！こちらの本がおすすめです

#JavaScript #JavaScript初心者 #JavaScript学習 #プログラミング #プログラミング学習 #プログラミング初心者

この記事が気に入ったらサポートをしてみませんか？