2. inserAdjacentHTML() / setAttribute()

💨 Element.inserAdjacentHTML() 

 

HTML or XML 같은 특정 텍스트를 파싱하고, 특정 위치에 DOM tree 안에 원하는 node들을 추가한다. 

element 안에 존재하는 element를 건드리지 않는다. 

 

◾ 구문 

 

element.inserAdjacentHTML(position, text);

 

 

 ✅ position은 아래 4가지만 사용 가능하다.

 

1) beforebegin --> element 앞에 

 

2) afterbegin --> element 안에 가장 첫번째 child 

 

3) beforeend --> element 안에 가장 마지막 child 

 

4) afterend --> element 뒤에 

 

❕ text는 HTML 또는 XML 로 해석될 수 있는 문자열(html code) 이고 , DOM tree에 삽입할 수 있다.

 

 

◾ 예시 

 

 

위와 같이 코드를 작성한 후 

 

 

inserAdjacent 구문을 이용하면 

 

 

이렇게 맨 이모티콘을 추가해줄 수 있다. 

 

---

💨 Element.setAttribute() 

 

javascript를 이용하여 선택한 요소(element)의 속성(attribute)값을 설정할 수 있다.

 

◾ 구문 

 

element.setAttribute('attribute_name', 'attribute_value');

 

◾ 예시 

 

 

속성으로 class를 주었고, 속성값은 CSS로 만들어둔 option correct를 주었다.

 

 

 

 

개발자 도구로 확인해보면 li 태그에 option correct 클래스가 추가 되었음을 확인할 수 있다.