要素を指定された形式で追加

Question

ボタンを押すと入力したコメントが指定された形式で画面に追加できるようにしたいです。
例えば、

<blockquote> <p>stars</p> <p>comment</p> <p> -- username</p> <p>入力された時間</p> </blockquote>

のように「add review」ボタンの下に入力された内容を表示できるようにしたいです。イベントハンドラとappendChild()を使って下記のコードの様に試行錯誤しても中々うまくいきません。

         <aside>
            <h1>Enter a Review</h1>
            <form id="review" name="review">
               <label id="starL" for="stars">
                  Stars (1 - 4)
               </label>
               <input name="stars" id="stars" type="number" value="4"
                      min="1" max="4" step="1" />
               <label id="commL" for="comment">
                  Comments
               </label>
               <textarea name="comment" id="comment" value="comment"></textarea>
               <label id="userL" for="username">
                  User
               </label>
               <input name="username" id="username" type="text" />
               <input id="addReview" value="Add Review" type="button" />
            </form>

            <div id="reviews">
               <a href="#">More Reviews</a>
            </div>

            <div id="review">
            </div>

         </aside>
         <script>
            let listener = function(e){
            document.getElementById("review").appendChild()
             }
            let addReview = document.getElementById("addReview");
            addReview.addEventListener("click", listener);
        </script>

Comments

[m.ts10806]

「うまくいかない」などで他者に伝わる情報量はゼロなので
具体的に起きている現象を記載してください。
https://teratail.com/help/question-tips#questionTips3-4-1

それに、appendChildに何も指定されてないような。

[Shuteon]

ご指摘ありがとうございます。うまくいかないのはappedChild()で「入力された値」を表示することができません。createElement("p").appendChild(createTextNode("Sample"))で任意の文字を追加できても「ユーザーから」というものに苦戦です。
複数の要素を表示したかったのでイベントハンドラを使用しました。入力内容を受け取って指定された形式で関数で表示することができないのです。

Answer 1

• Stars フィールドの値の文字列は document.querySelector('#stars').value で取得できます。
• Comments フィールドの値の文字列は document.querySelector('#comments').value で取得できます。
• User フィールドの値の文字列は document.querySelector('#username').value で取得できます。

これらを listener 関数の中で呼んで、お好きなように加工してTextノードを作ってappendChild() すればよいでしょう。