body에 있는 내용이 표시하는 방법..

커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
body에 있는 내용이 표시하는 방법..
undefined주차
김*환
・
추천
・
조회수
답변 완료
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
바디에 있는 내용을 저 박스 위로 올리고 싶은데
어떻게 해야 표시가 되나요?
작성한 코드 및 에러 메세지
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>

    <title>방명록명록록</title>

    <style>
        .card1 {
            max-width: 600px;
            width: 95%;
            margin: 20px auto 0px auto;
            box-shadow: 0px 0px 4px 0px gray;
            padding: 20px;
        }

        .form-floating {
            margin: 10px;
        }

        .button > button {
            margin-right: 10px;

        }

        .button {
            display: flex;
            flex-direction: row;
            justify-content: right;
            align-items: center;
            margin-top: 10px;
        }

        .card {
            max-width: 500px;
            width: 95%;
            margin: 20px auto 0px auto;
        }
        .wrap > h1 {

        }

    </style>
    <script>
        $(document).ready(function () {
            show_comment();
        });

        function save_comment() {
            let name = $('#name').val()
            let comment = $('#comment').val()

            $.ajax({
                type: 'POST',
                url: '/comments',
                data: {name_give: name, comment_give: comment},
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            })
        }

        function show_comment() {
            $('#comment-list').empty()
            $.ajax({
                type: "GET",
                url: "/comments",
                data: {},
                success: function (response) {
                    let rows = response["comments"]
                    for (let i = 0; i < rows.length; i++) {
                        let name = rows[i]['name']
                        let comment = rows[i]['comment']
                        let temp_html = `
                                <div class="card">
                              <div class="card-body">
                                <blockquote class="blockquote mb-0">
                                  <p>${comment}</p>
                                  <footer class="blockquote-footer">${name}</footer>
                                </blockquote>
                              </div>
                            </div>
                            </div>`
                        $("#comment-list").append(temp_html)

                    }

                }
            });
        }</script>
</head>
<body>
<div class="wrap">
    <div class="card mb-3" style="max-width: 540px;">
        <div class="row g-0">
            <div class="col-md-4">
                <img src="../static/images/MEMEME.jpg" class="img-fluid rounded-start" alt="...">
            </div>
            <div class="col-md-8">
                <div class="card-body">
                    <h5 class="card-title">진짜 초보의 팀프로젝트 살아남기 </h5>
                    <p class="card-text"> e&I 팀의 김경환 입니다.</p>


                    <h6> 하나부터 열까지 전부 알려주고 싶은 마음! but, 하나부터 둘까지 밖에 모르는 실력..</h6>
                    <p class="card-text"><small class="text-muted">아직은 많이 부족하다.. </small></p>
                </div>
            </div>
        </div>
    </div>
    <div class="card mb-3" style="max-width: 540px;">
        <div class="row g-0">
            <div class="col-md-4">
                <img src="../static/images/isfp.jpg" class="img-fluid rounded-start" alt="...">
            </div>
            <div class="col-md-8">
                <div class="card-body">
                    <h5 class="card-title">질문지가 달라져도 </h5>
                    <p class="card-text"> ISFP </p>
                    <p2></p2>
                    <p3></p3>
                    <p class="card-text"><small class="text-muted"> #찐ISFP </small></p>
                </div>
            </div>
        </div>
    </div>
    <div class="card mb-3" style="max-width: 540px;">
        <div class="row g-0">
            <div class="col-md-4">
                <img src="../static/images/water.jpg" class="img-fluid rounded-start" alt="...">
            </div>
            <div class="col-md-8">
                <div class="card-body">
                    <h5 class="card-title">성격은</h5>
                    <p class="card-text">
                        <p2> - 물이 흐르듯 유한 성격</p2>
                    </p>
                    <p2> - 비교적 순종적</p2>
                    <p class="card-text"><small class="text-muted">.</small></p>
                </div>
            </div>
        </div>
    </div>
    <div class="card mb-3" style="max-width: 540px;">
        <div class="row g-0">
            <div class="col-md-4">
                <img src="../static/images/Tborn.jpg" class="img-fluid rounded-start" alt="...">
            </div>
            <div class="col-md-8">
                <div class="card-body">
                    <h5 class="card-title">내일이 세상의 끝이라면</h5>
                    <p class="card-text">마지막 만찬은 </p>
                    <p2> T본 스테이크</p2>
                    <p class="card-text"><small class="text-muted">.</small></p>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="card1">
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="name" placeholder="name@example.com">
        <label>이름</label>
    </div>
    <div class="form-floating">
        <textarea class="form-control" placeholder="댓" id="comment"></textarea>
        <label>댓글</label>
    </div>
    <div class="button">
        <button onclick="save_comment()" type="button" class="btn btn-dark">방명록 작성</button>
    </div>
</div>
<div class="card2" id="comment-list">
</div>


</body>

</html>
댓글 알림