Step06_innerHTML(innerHTML, insertAdjacentText, insertAdjacentHTML, beforeend)스터디

 

innerText

 

입력된 문자열을 그대로 넣는다

 

innerHTML

 

입력된 문자열을 html 형식으로 넣는다.

 

 

--함수--

 

insertAdjacentElement

 

ex) targetElement.insertAdjacentElement(position, element)

 

insertAdjacentElement() 메서드는 특정 element를 targetElement를 기준, position을 반영하여 삽입하게 도와주는 메서드이다.

 

insertAdjacentHTML

 

ex) targetElement.insertAdjacentHTML(position, element)

 

insertAdjacentHTML() 메서드는 특정 html 형식으로 targetElement를 기준, position을 반영하여 삽입하게 도와주는 메서드이다.

 

insertAdjacentText

 

ex) targetElement.insertAdjacentText(position, element)

 

insertAdjacentText() 메서드는 특정 문자열을 targetElement를 기준, position을 반영하여 삽입하게 도와주는 메서드이다.

 

 

--position--

 

beforebegin

 

targetElement의 앞

afterbegin

 

targetElement 자식 요소의 첫 번째 위치

beforeend

 

targetElement 자식요소의 마지막 위치

afterend

 

targetElement의 뒤

 

 

ex) targetElement가 <p>일 경우. 각각의 주석 위치는 삽입 위치이다.

 

<!-- beforebegin -->
<p>
<!-- afterbegin -->
기존 텍스트
<!-- beforeend -->
</p>
<!-- afterend -->

 

1. 로드시 화면

2. innerText와 insertText를 누른 경우

3. 2번 상황 이후 innerHTML과 insertHTML을 누른 경우

 

첫번째 줄 버튼 2개 - 많이 클릭하더라도 출력값이 1개로 유지된다.

 

innerText 버튼은 innerText를 사용해서 #result를 해당 텍스트로 그대로 바꿔준다. <a href="https://daum.net" >daum> 그대로 출력된다.

innerHTML 버튼은 innerHTML을 사용해서 #result를 해당 정보를 HTML 형식으로 바꿔준다. 그렇기 때문에 하이퍼링크가 작동하는 daum 텍스트가 출력된다. 

 

두번째 줄 버튼 2개 - 클릭마다 출력값이 쌓인다.

 

insertText 버튼은 insertAdjacentText를 사용해서 beforeend 위치에 해당 텍스트 그대로 삽입해준다. 이때 <a href="https://daum.net" >daum> 이 기존 출력값을 없애지 않고 출력된다.

insertHTML insertAdjacentHTML를 사용해서 beforeend 위치에 해당 정보를 HTML 형식으로 삽입해준다. 이때 하이퍼링크가 작동하는 daum 텍스트가 기존 출력값을 없애지 않고 출력된다.