html 마크업 실수에 관하여

html 마크업 중에 특정 영역에서 특정 자식 노드만 안보이는 현상이 있었다.

<article>
        <!-- 게시글 정보 -->
        <div class='top'>
            <div class='post-title'></div>
            <div class="info">
                <div class='post-author'></div>
                <div class='post-date'></div>
            </div>
        </div>
        <!-- 본문 -->
        <div style="white-space:pre-wrap" class='post-content'></div>
        <!-- 댓글 -->
        <div class="comment">
            <div class="comment-form">
                <textarea name="comment-area" placeholder="add a comment!"></textarea>
                <input type="button" value="send" class="submit-comment">
            </div>
            <div class="comment-lines">

            </div>
        </div> 
    </article>

class값이 comment인 부분이 글을 클릭하면 보이게 되는 형식으로 만들고 있는 중이였다.
그런데 댓글 입력폼 부분만 계속 디스플레이에 나오지 않았다
즉, 댓글 리스트는 잘 나오고 입력폼은 안나왔는데
며칠간 원인을 분석한 결과 정말 바보같게도
comment div 자체에 아래와 같이
sectionComment.innerHTML = tmp;
// 여기서 tmp는 댓글 리스트
그냥 덮어씌었다.
그러니 당연히 폼 영역은 아예 마크업에서 사라지게 되는 것
그래서 댓글 리스트를 comment-lines 영역에 제대로 집어 넣었더니 해결됐다

좋은 웹페이지 즐겨찾기