Create new element
Create new text node
Append text node to new element node
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);
});
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;
}