야간멘토님께 질문할 수 있는 기회가 생겨 질문을 하고 얻은 대답은 아래와 같았고 그래서 appendChild()에 대한 내용을 검색해보게 되었다.
자바스크립트에 appendChild() 메소드를 활용해보면 됩니다. 하나의 폼태그 안에 동적으로 생성을 할 수가 있습니다.
노드의 추가 영역
- appendChild()
- insertBefore()
- insertData()
appendChild()는 자바스크립트 안에서 노드라는 영역에 속했다.
그 안에서도 노드의 추가, 생성, 제거, 복제가 있는데 오늘은 추가의 appendChild()에 대해서만 포스팅 해볼 것이다.
appendChild() 메서드
.appendChild() 메서드는 선택한 요소 마지막 위치에 새로운 요소를 추가한다.
특징
- append 메서드와 다르게 오직 노드 객체만 추가할 수 있다. (append()는 DOM String도 추가 가능) - 오직 하나의 객체만 추가할 수 있다. - retern값으로 엘리먼트요소를 반환한다. - 어떤 요소를 한 요소에서 다른 요소로 이동시킬 때도 사용한다. - 어떤 요소에 텍스트를 추가할 때 사용한다. - appendChild + innerHTML 세트로 사용하면 내용 변경에 유용하다
Syntax
var 변수명 = element.appendChild("요소이름");Example
// 새로운 단락 요소를 생성하고 문서에 있는 바디 요소의 끝에 붙인다.
var p = document.createElement("p");
document.body.appendChild(p);참고
중요한 건 꺾이지 않는 마음 :)