문자열로 노드 제어

innerHTML

  • 문자열로 자식 노드를 만들 수 있는 기능을 제공.

  • 자식 노드의 값을 읽어올 수도 있음

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <ul id="target">
    <li>banana</li>
    <li>apple</li>
  </ul>
  <input type="button" value="get" onclick="fn_getInnerHtml()">
  <input type="button" value="set" onclick="fn_setInnerHtml()">
  
  <script>
    function fn_getInnerHtml() {
      var target = document.getElementById('target');
      
      // html 반환
      alert(target.innerHTML);
    }
    
    function fn_setInnerHtml() {
      var target = document.getElementById('target');
      
      // html 변경
      target.innerHTML = '<li>mango</li><li>berry</li>'
    }
  </script>
</body>
</html>

outerHTML

  • 선택한 엘리먼트를 포함해서 처리됨

innerText / outerText

  • 값을 읽을 때는 HTML코드를 제외한 문자열을 리턴하고, 값을 변경할 때는 HTML의 코드를 그대로 문자열로 추가함

insetAdJacentHTML

  • 조금더 세밀한 노드 추가가 가능

  • beforebegin : 선택한 요소가 시작되기전 위쪽(이전 형제요소)에 추가

  • afterbegin : 선택한 요소가 시작한 바로 다음(첫번째 자식요소)에 추가

  • beforeend : 선택한 요소가 끝나기 직전(마지막 자식요소)에 추가

  • afterend : 선택한 요소가 끝나고 바로 다음(다음 형제요소)에 추가

PreviousjQuery 노드 변경 APINextDocument 객체

Last updated

Was this helpful?