見出し画像

【JavaScript】innerHTMLの値の改行

関野泰宏

innerHTMLの値の改行

innerHTMLプロパティの書き込み時にHTML構文を当てはめる場合、通常のプログラムを書くようにEnterキーで改行はできません。

タグ内の文字列を改行したい場合や、ソースコード自体を改行し読みやすくしたい場合などに使える方法になります。

サンプルプログラム

<html>
<head>
	<meta charset="utf-8">
</head>
<body>
    
    <p id ="myinput">hello world!hello world!hello world!hello world!hello world!hello world!hello world!hello world!hello world!hello world!</p>
    <input type="button" value="Click" onclick="myfunc()">
    <script>
      var myfunc = function(){
      
          var myh1 = document.getElementById("myinput");
          myh1.innerHTML = "hello world!<br>hello world!<br>hello world!<br>hello world!<br>hello world!<br>hello world!<br>hello world!<br>hello world!<br>hello world!<br>hello world!";
          
      }
    </script>
  </script>
</body>
</html>

実行結果

hello world!
hello world!
hello world!
hello world!
hello world!
hello world!
hello world!
hello world!
hello world!
hello world!

改行したい箇所に<br>タグを追加するだけで改行する事が出来るので簡単です。

プログラムダウンロード


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

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

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