-
[자바스크립트 HTML DOM] HTML 내용 변경JavaScript 2023. 3. 30. 10:58
# innerHTML
HTML의 특정 위치에 새로운 HTML을 삽입할 때 innerHTML을 사용할 수 있습니다.
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body> <select id="sel"></select> <script> let sel = document.getElementById("sel"); sel.innerHTML = '<option value="">선택하세요</option>'; </body> </html># innerText
innerText는 innerHTML과 유사하지만 텍스트 내용만 삽입이 가능합니다.
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body> <h1 id="title"></h1> <script> document.getElementById("title").innerText = "제목입니다."; </body> </html># insertAdjacentHTML()
앞서 말한 innerHTML과 innerText는 현재 접근한 DOM 요소 안에 자식 노드로 텍스트 혹은 HTML을 삽입하는 방법입니다. 이렇게 하면 자식 노드가 모두 교체됩니다. 때로는 DOM 요소를 기준으로 형제 노드 혹은 자식 노드를 교체하지 않고 자식 노드의 제일 앞 혹은 제일 뒤에 새로운 HTML을 삽입해야 하는 경우가 생깁니다. 이때 insertAdjacentHTML()을 사용할 수 있습니다.
insertAdjacentHTML()은 2개의 파라미터를 사용합니다. 첫 번째 파라미터는 DOM 요소를 삽입할 위치이고, 두 번째 파라미터는 삽입할 DOM 요소에 대한 문자열입니다. DOM을 삽입할 위치는 아래와 같이 총 4가지를 사용할 수 있습니다.
- afterbegin - 접근한 DOM 요소의 자식 노드의 제일 첫 번째 노드로 삽입
- afterend - 접근한 DOM 요소 바로 다음 노드로 삽입
- beforebegin - 접근한 DOM 요소 바로 직전 노드로 삽입
- beforeend - 접근한 DOM 요소의 자식 노드의 제일 마지막 노드로 삽입
<h1>여기는 h1 영역</h1> <!-- beforebegin --> <ul id="myUL"> <!-- afterbegin --> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <!-- afterbegin --> </ul> <!-- afterend --> <h2>여기는 H2 영역</h2><ul> 태그처럼 항목(<li>)을 출력하는 태그에서 ul 요소에서 접근한 후 첫 번째 항목(<li>)을 새로 추가하고 싶을 때 사용할 수 있습니다.
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body> <ul id="myUL"> <li>항목 1</li> <li>항목 2</li> <li>항목 3</li> <li>항목 4</li> </ul> <button onclick="myFunction()">항목추가</button> <script> function myFunction() { let h = document.getElementById("myUl"); h.insertAdjacentHTML("afterbegin", "<li>새로운 항목</li>"); } </script> </body> </html>
# insertAdjacentText()
insertAdjacentText() 역시 자식 노드가 아닌 현재 접근한 DOM 요소의 위치를 기준으로 텍스트를 삽입하는 방법입니다. 2개의 파라미터를 사용합니다. 텍스트를 삽입할 위치는 insertAdjacentHTML()과 동일합니다.
# remove()
remove() 함수는 HTML 요소를 삭제할 때 사용합니다.
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body> <p id="demo">p태그 문장입니다.</p> <button onclick="myFunction()">Remove</button> <script> function myFunction() { let myobj = document.getElementById("demo"); myobj.remove(); } </script> </body> </html>다음 포스팅은 DOM 이벤트로 찾아뵙겠습니다. 감사합니다
참조 | 바닐라 자바스크립트(고승원, 비제이퍼블릭)
'JavaScript' 카테고리의 다른 글
[자바스크립트 HTML DOM] DOM Style(스타일) (0) 2023.04.03 [HTML DOM] DOM 이벤트 (0) 2023.04.03 [자바스크립트 HTML DOM] DOM Atrribute (0) 2023.03.29 [자바스크립트 HTML DOM] DOM Element(요소) (0) 2023.03.28 [REST API] JSON 서버 사용하기 (0) 2023.03.28