fizzbuzzを横向きではなく、下向きに表示させたい件

下の写真の通り、ブラウザ（GOOGLE　CROOME）に下向きにfizz buzzを並べるのが目標です。

しかし、document.writeを使った場合、テキストが次のメッセージ添付写真
の通り、横向きに出力されてしまいます。

document.writeに関するリファレンス(https://developer.mozilla.org/ja/docs/Web/API/Document/write)　も確認したのですが、手掛かりとなる情報は得られませんでした。

個人的な推測ですが、テックアカデミーの記事（https://techacademy.jp/magazine/5638
）を参考に、以下の手順で解決できるのかとも思ったのですが、思うようにいきませんでした。

①getElementById(id);　と　textContentプロパティ　と　createTextNode(text);　を使ってツリー構造を作る
②appendChild(element)を使ってテキスト要素の中にツリー構造組み込む
→ブラウザに表示される

どうすれば、下向きにfizz buzzを並べることができるのかご教示頂けるとありがたいです。
宜しくお願い致します。

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>FizzBuzz問題</title>
</head>
<body>
    <p>
      FizzNum: <input type="text" id="fizzInput" value=""  placeholder ="整数値を入力してください">
    </p>  
    <p>
      BuzzNum:<input type="text" id="buzzInput"  value="" placeholder ="整数値を入力してください">
    </p>
    <button id="btn">実行</button>
    
  <p>【出力】</p>
  <p>整数値を入力してください</p>

  <script>
  'use strict';
  {
  const fizzForm = document.getElementById ('fizzInput');
  const buzzForm = document.getElementById ('buzzInput');
  const btn = document.getElementById('btn');

  btn.addEventListener('click', function() {
    const fizzNum = fizzForm.value;
    const buzzNum = buzzForm.value;

  for (let number = 1; number <= 100; number++) {
  if(number % fizzNum === 0 && number % buzzNum === 0 ) {
    document.write("FizzBuzz" + " "+ number);
  } else if(number % fizzNum === 0) {
    document.write("Fizz" + " " + number);
  } else if(number % buzzNum  ===  0) {
    document.write("Buzz" + " " + number);
  }
  }
  });
  }
  </script>
</body>
</html>
コード

行動規範の内容に同意します

回答2件

【JavaScript - document.writeでの改行｜teratail】
https://teratail.com/questions/168181

HTMLの改行は<br>です。

投稿2019/11/14 05:25

kei344

総合スコア69596

asako1010

2019/11/14 05:51

迅速な回答ありがとうございます。 <br>で解決しました。感動しました。

asako1010

2019/11/14 05:53

もし、可能であれば教えて頂きたいのですが、以下の方法でも解決策はあるのでしょうか？ ①getElementById(id);　と　textContentプロパティ　と　createTextNode(text);　を使ってツリー構造を作る ②appendChild(element)を使ってテキスト要素の中にツリー構造組み込む当方初心者のため、見当違いな質問していましたら、すみません。

kei344

2019/11/14 06:06

「解決策」とは？

asako1010

2019/11/14 06:14

言葉足らずで申し訳ありません。 <br>を使う方法の他に、「getElementById(id);」と「textContentプロパティ」と「createTextNode(text)」と「appendChild(element)」を使うことで、fizzbuzzを下向きに表示させる解決策があるのかと思い質問致しました。

kei344

2019/11/14 06:24

一応出来ると思います。改行をtextContentだけで表現するなら、出力先の要素をpre要素にすれば、文字列としての改行がHTMLに反映します。他の要素なら、素直に1行ごとにp要素に入れて出力すればよいです。

asako1010

2019/11/14 06:36

丁寧な回答ありがとうございます。やってみます！

行動規範の内容に同意します

ベストアンサー

回答依頼ありがとうございます。

JavaScript
1
2  for (let number = 1; number <= 100; number++) {
3  if(number % fizzNum === 0 && number % buzzNum === 0 ) {
4    document.write("FizzBuzz" + " "+ number+"<br>");
5  } else if(number % fizzNum === 0) {
6    document.write("Fizz" + " " + number +"<br>");
7  } else if(number % buzzNum  ===  0) {
8    document.write("Buzz" + " " + number +"<br>");
9  }
10  }
11  });
12  }
13