[Javascript] Javascript 입문 10 (170321)

Javascript 입문 10

• Dynamic Dom

- 원하는 시점에 동적인 객체를 만들어 넣어야 할 때 DynamicDom을 이용한다.

- DOM : Document Object Model

• createElement 이용하여 동적으로 객체 추가하기

<순서>

1. document.createElement("객체명"); 을 이용하여 참조값을 담는다.

2. 만들어진 문서객체에 텍스트를 출력한다. (innerText 이용)

3. 객체를 넣을 body의 참조값을 담는다.

4. append함수를 이용하여 만들어진 div를 추가한다.

- append : 객체를 자식요소로 맨 뒤에 추가한다.

- prepend : 객체를 자식요소로 맨 앞에 추가한다.

• 동적 객체 추가 + 속성 추가하기

- setAttribute(속성명, 속성값) 사용

• 응용1 : 버튼 클릭 후 추가되는 동적 객체 >
  

ANSWER>

1. createElement를 이용하여 div동적 객체를 추가한다.

2. setAttribut를 이용하여 style을 추가한다.

3. append를 이용하여 div를 myDiv에 추가해준다.

** 출력 결과 **

• 응용2 : input창에 입력한 글 생성되게 하기
  

ANSWER>

** 출력 결과 **

• 응용3 : object 요소 테이블에 삽입하기
  

ANSWER>

** 출력 결과 **

• 응용4 : 함수를 만들어 버튼 클릭시 함수 수행하도록 하기

- sendMsg는 입력창의 text를 li에 넣어 출력하는 함수이다.

- getRef는 document.querySelector를 쉽게 이용할 수 있도록 selector 선택자를 이용하여 만든 함수이다.

- input창의 focus가 오도록 한다. ( .focus()함수 이용)

- input요소에 enter를 누르면 입력되도록 한다. ( event.keyCode 이용)

ANSWER>

** 출력 결과 **