[JAVASCRIPT] HTML 내용 변경

innerHTML

HTML의 특정 위치에 새로운 HTML을 삽입할 때 innerHTML을 사용할 수 있다.

<select id="sel"></select>
let sel=document.getElementById("sel");
sel.innerHTML='<option value="">선택하세요</option>';

innerText

innerText는 innerHTML과 유사하지만 텍스트 내용만 삽입이 가능하다.

<h1 id="title"></h1>
<script>
  document.getElementById("title").innerText="제목 입니다.";
</script>

insertAdjacentHTML()

innerHTML과 innerText는 현재 접근한 DOM 요소 안에 자식 노드로 텍스트 혹은 HTML을 삽입하는 방법이다. 이렇게 하면 자식 노드가 모두 교체된다.
때로는 DOM 요소를 기준으로 형제 노드 혹은 자식 노드를 교체하지 않고 자식 노드의 제일 앞 혹은 제일 뒤에 새로운 HTML을 삽입해야 하는 경우가 발생한다. 이때 insertAdjacentHTML()을 사용할 수 있다.

2개의 파라미터를 사용하는데, 첫 번째 파라미터는 DOM 요소를 삽입할 위치이고, 두 번째 파라미터는 삽입할 DOM 요소에 대한 문자열이다.

DOM을 삽입할 위치

• 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>
  <!--beforeend-->
</ul>
<!--afterend-->
<h2>여기는 H2 영역</h2>

<ul>태그처럼 항목(<li>)을 출력하는 태그에서 ul 요소에 접근한 후 첫 번째 항목(<li>)을 새로 추가하고 싶을 때 사용할 수 있다.

<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>

insertAdjacentText()

insertAdjacentText() 역시 자식 노드가 아닌 현재 접근한 DOM 요소의 위치를 기준으로 텍스트를 삽입하는 방법이다.

2개의 파라미터를 사용하는데, 첫 번째 파라미터는 텍스트를 삽입할 위치이고, 두 번째 파라미터는 삽입할 텍스트 문자열이다.

텍스트를 삽입할 위치

• afterbegin: 접근한 DOM 요소의 자식 노드의 제일 첫 번째 노드로 삽입
• afterend: 접근한 DOM 요소 바로 다음 노드로 삽입
• beforebegin: 접근한 DOM 요소 바로 직전 노드로 삽입
• beforeend: 접근한 DOM 요소의 자식 노드의 제일 마지막 노드로 삽입

remove()

remove() 함수는 HTML 요소를 삭제할 때 사용한다.

<p id="demo">p 태그 문장입니다.</p>
<button onclick="myFunction()">Remove</button>
<script>
  function myFunction(){
  	let myobj=document.getElementById("demo");
  	myobj.remove();
  }
</script>