반응형
- 새로운 태그를 생성하는 순서
- Element를 생성합니다.
- 태그를 생성하는 부분입니다.
- 태그에 속성을 추가합니다.
- class, value등 원하는 속성을 추가할 수 있습니다.
- 태그안에 내용을 추가합니다.
- 태그안에 텍스트 또는 또 다른 태그를 추가할 수 있습니다.
- appendChild를 사용하면 뒷쪽에 추가됩니다.
- prepand를 사용하면 앞쪽에 추가됩니다.
- 생성한 태그를 원하는 태그안에 추가합니다.
- Element를 생성합니다.
1. body태그에 테스트를 위한 태그를 추가합니다.
- ul: 새로운 태그가 추가될 부모태그 입니다.
- input: 새로운 태그에 추가할 내용을 입력합니다.
- button: 새로운 태그를 앞에 추가하는 버튼과 뒤에 추가하는 버튼입니다.
<body>
<ul></ul>
<input id="input" type="text" />
<button id="front">앞에 추가</button>
<button id="back">뒤에 추가</button>
</body>2. 테스트용 자바스크립트 소스내용 입니다.
- 테스트 페이지에서 input 태그에 내용을 입력하고 버튼을 누르면 ul 태그에 새롭게 생성된 li 태그가 추가되는 내용입니다.
const ul = document.querySelector("ul"); // 리스트를 추가하기 위한 ul태그
const front = document.querySelector("#front"); // 리스트를 앞에 추가하는 이벤트를 위한 button 태그
const back = document.querySelector("#back"); // 리스트를 뒤에 추가하는 이벤트를 위한 button 태그
const input = document.querySelector("#input"); // 추가할 내용을 입력할 input태그
// 태그를 생성하는 함수
function createElementFn(value) {
const li = document.createElement("li"); // li태그 생성
li.setAttribute("class", "test"); // li태그에 속성 추가
li.innerText = value; // input태그의 값을 li에 추가
return li;
}
// 태그를 추가하는 함수(뒤쪽)
function backEvent() {
const li = createElementFn(input.value);
ul.appendChild(li); // 생성한 li태그를 ul태그 뒤쪽에 추가
input.value = ""; // input값 비우기
}
// 태그를 추가하는 함수(앞쪽)
function frontEvent() {
const li = createElementFn(input.value);
ul.prepend(li); // 생성한 li태그를 ul태그 앞쪽에 추가
input.value = ""; // input값 비우기
}
front.addEventListener("click", frontEvent);
back.addEventListener("click", backEvent);
※ 모르는 문법은 아래 내용을 참고해 주시기 바랍니다.
2022.12.24 - [IT/Javascript] - [Javascript] querySelector, querySelectorAll 사용법
[Javascript] querySelector, querySelectorAll 사용법
※ CSS 선택자를 사용하여 태그를 가져올때 사용합니다. ※ 사용법 document 또는 이미 가져온 태그에서 querySelector 또는 querySelectorAll 를 사용하면 원하는 태그를 가져올 수 있습니다. 파라미터는 원
uniconmaster.tistory.com
2022.12.24 - [IT/Javascript] - [Javascript] addEventListener 사용법
[Javascript] addEventListener 사용법
※ 태그에 이벤트를 추가할때 사용합니다. ※ 사용법 원하는 태그에 addEventListener함수를 사용합니다. 첫번째 파라미터는 이벤트 종류를 입력합니다. 예제소스에서는 많이 사용되는 click 이벤트
uniconmaster.tistory.com
반응형
'JS, jQuery' 카테고리의 다른 글
| 자바스크립트 새로고침 (0) | 2023.05.11 |
|---|---|
| addEventListener 오류 해결방법 (0) | 2023.05.11 |
| textContent (0) | 2023.02.16 |
| 마우스에 반응하는 3D Animation (feat.Dev Ed) (0) | 2023.02.16 |
| jQuery 제이쿼리 라이브러리 (0) | 2023.01.19 |
