1. Add new element to DOM

1. Create new element

2. Create new text node

3. Append text node to new element node

4. Get position and append as a child

const thisIsButton = document.getElementsByClassName('button_in_div_')[0];

thisIsButton.addEventListener('click', function() {
   
    let commentFromUser = document.getElementById('comment_from_user');

    // change original text
    // let originalText = document.getElementById('user_comments');
    // originalText.innerHTML = commentFromUser.value;


    // make element, text node
    let newElement = document.createElement('div');
    let newText = document.createTextNode(commentFromUser.value);

    newElement.appendChild(newText);

    // find current node
    // let position = document.getElementById('user_comments')[0]; // this is wrong code
    const position = document.getElementsByClassName('comment_div')[0];
    position.appendChild(newElement);

// debugging code
    // alert(newElement);
    // alert(commentFromUser.value);
});

2. Hide contents scrolled up

z-index로 스크롤된 컨텐츠를 숨길 수 있다. z-index는 요소들의 쌓는 순서를 결정하는데 z-index가 큰 엘리먼트가 화면 앞으로 나와서 낮은 엘리먼트를 가른다.

header{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 80px;

    border: 0 solid #000;

    /* from instagram */
    /* height: 77px;  */

    /* background-color: rgba(45,45,45,0.95); */
    /* background-color: rgba(45,45,45,0); */
    
    background-color: white;
    /* background: #ccc; */
    z-index:2;

}