01. appendChild : DOM 객체를 부모의 마지막 자식으로 삽입 (= 기존 항목을 유지하고 맨 뒤에 추가함)
부모.appendChild(DOM객체);02. insertBefore : DOM 객체를 부모의 자식 객체 중 기준자식 앞에 삽입
부모.insertBefore(DOM객체,기준자식);
- 예제
<body> <input type="text" id="comment" /> <button type="button" id="appendChild">appendChild</button> <button type="button" id="insertBefore1">insertBefore1</button> <button type="button" id="insertBefore2">insertBefore2</button> <hr /> <!-- 동적으로 JS가 생성한 HTML 요소가 추가될 위치 --> <ul id="list"> </ul> <script> //1.동적으로 JS가 생성한 HTML요소가 추가 될 객체 -> <ul id="list"></ul> const list = document.querySelector("#list"); //2.사용자가 입력할 input태그 -> <input id="comment"/> const comment = document.querySelector("#comment"); //3.동적으로 <li>태그 Element 객체를 생성하여 리턴하는 함수 const getItem = (clsName) => { //4.JS에게 <li>태그를 코딩시킴 //-> createElement const li = document.createElement('li'); //-> <li></li> //5.CSS클래스 추가시 add()함수에게 갯수제한 없이 콤마로 구분하여 여러개 지정 가능함 li.classList.add('item', clsName); //-> <li class="item clsName"></li> //6.사용자가 입력한 내용을 <li>태그에 표시함 //-> input의 value속성은 입력태그의 초기값을 의미하며 사용자가 변경가능하다. li.innerHTML = comment.value; //7.<li>에 클릭이벤트 적용 li.addEventListener('click', e => { //8.클릭된 자기 스스로를 제거함 e.currentTarget.remove(); }); return li; }; /* 자식요소 추가 버튼 클릭 이벤트 */ //9.각 버튼객체에 3번 함수를 사용해준다. document.querySelector('#appendChild').addEventListener('click', (e) => { //li태그를 반환받음 const li = getItem('blue'); //<ul>태그에 JS가 코딩한 <li>를 자식요소로 추가함 //-> appendChild :기존 항목을 유지하고 맨 뒤에 추가함 list.appendChild(li); }); document.querySelector("#insertBefore1").addEventListener('click', (e) => { //부모노드.insertBefore(삽입할 노드, 기준 점 노드) //-> 기준 점이 null인 경우 appendChild와 동일하게 동작 list.insertBefore(getItem('orange'), null); }); document.querySelector("#insertBefore2").addEventListener('click', (e) => { //기준점이 지정된 경우 기준점 직전에 추가됨 //-> 첫번째 항목 직전에 추가하라는 의미 -> 가장 첫 번째 요소로 추가됨 list.insertBefore(getItem('pink'), document.querySelector('li:first-child')); }); </script> </body>
냠소현 개발일지