[자바스크립트] Node , 고객관리 프로그램 예제

DOM Node 접근 처리 예제

DOM Node 접근 처리

insertAdjacentHTML의 첫 번째 속성 종류

beforeend : 닫는 태그 바로 앞
beforebegin : 시작 태그 바로 앞
afterend : 닫는 태그 바로 뒤
afterbegin: 시작 태그 바로 뒤

• 뼈해장국
• 우삼겹짬뽕
• 오므라이스

 

들어갈 데이터

let data ='<li>순대국밥</li>';

 

1) beforebegin : 시작 태그 바로 앞

let beforebegin = document.getElementById('beforebegin');

let list = document.getElementById('list');

beforebegin.addEventListener('click', beforebeginFunc);

function beforebeginFunc(){
    list.insertAdjacentHTML('beforebegin',data) 
}

 

2) afterbegin: 시작 태그 바로 뒤 

let afterbegin = document.getElementById('afterbegin');

let list = document.getElementById('list');

afterbegin.addEventListener('click', afterbegindFunc);

function afterbegindFunc(){
    list.insertAdjacentHTML('afterbegin',data) 
}

 

3) beforeend   : 닫는 태그 바로 앞

let beforeend = document.getElementById('beforeend');

let list = document.getElementById('list');

beforeend.addEventListener('click', beforeendFunc);

function beforeendFunc(){
    list.insertAdjacentHTML('beforeend',data) 
}

 

4) afterend : 닫는 태그 바로 뒤

let afterend = document.getElementById('afterend');

let list = document.getElementById('list');

beforeend.addEventListener('click', beforeendFunc);

function afterendFunc(){
    // alert();
    // list.innerHTML = data; // 기존 데이터를 날려버린다.
    list.insertAdjacentHTML('afterend',data) // 'afterend' : ul 밖에
}

 

원래 본문

let afterend = document.getElementById('afterend');
let afterbegin = document.getElementById('afterbegin');
let beforeend = document.getElementById('beforeend');
let beforebegin = document.getElementById('beforebegin');

let list = document.getElementById('list');

afterend.addEventListener('click', afterendFunc);
afterbegin.addEventListener('click', afterbegindFunc);
beforeend.addEventListener('click', beforeendFunc);
beforebegin.addEventListener('click', beforebeginFunc);


let data ='<li>순대국밥</li>';


function beforebeginFunc(){
    list.insertAdjacentHTML('beforebegin',data) 
}
function afterbegindFunc(){
    list.insertAdjacentHTML('afterbegin',data) 
}

function beforeendFunc(){
    list.insertAdjacentHTML('beforeend',data) 
}
function afterendFunc(){
    // alert();
    // list.innerHTML = data; // 기존 데이터를 날려버린다.
    list.insertAdjacentHTML('afterend',data) // 'afterend' : ul 밖에
}

 

예제 : 고객관리 프로그램

- 고객의 이름, 연락처,이메일을 입력받은 후 추가 버튼을 클릭하면 입력된 고객의 정보가 화면 하단에 계속 추가되도록 한다.
- 모든 정보는 반드시 입력 받아야 하며 태그 옵션 중 required 를 사용한다. 
<form> 태그 안에 <input type='text' id='name' required>

 

html 본문

고객이름	연락처(전화번호)	이메일

---

고객 목록

 

// submit이 그 기능을 잃음! --> preventDefault() 때문에
document.getElementById('send').addEventListener('click', function(event) {
    console.log(event);
    event.preventDefault();
});

document.getElementById('send').addEventListener('click', function() {
    let username = document.getElementById('username').value;
    let phone = document.getElementById('phone').value;
    let email = document.getElementById('email').value;

    let data = `${username} / ${phone} / ${email}<br> `;
    let result   = document.getElementById('result');
    result.insertAdjacentHTML("beforeend", data);
});

document.getElementById('send').addEventListener('click', function() {
    document.getElementById('member').reset();
});

beforeend 를 조건으로 하여 아래에 쌓이도록 하였다.
리스트에 어떻게 추가할 수 있는지에 대한 예제이기 때문에 따로 검증을 위한 절차는 추가하지 않았다.

* Event.preventDefault()

Event.preventDefault() - Web API | MDN

설명 :  Event 인터페이스의 preventDefault() 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정합니다.

 

정보 입력 결과