문자열로 노드 제어

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

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

<!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.outerHTML);
    }
    
    function fn_setInnerHtml() {
      var target = document.getElementById('target');
      
      // html 변경(자신 포)
      target.outerHTML = '<ul id="target"><li>mango</li><li>berry</li></ul>'
    }
  </script>
</body>
</html>

innerText / outerText

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

<!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>apple</li>
    <li>banana</li>
    <li>orange</li>
  </ul>
  <input type="button" value="get" onclick="fn_getText()" />
  <input type="button" value="set" onclick="fn_setText()" />
  
  <script>
    var target = document.getElementById('target');
    
    // html 태그를 제외한 문자열만 반환
    // inner : 자식들의 텍스트 노드들만, outer : 자신의 텍스트 노드까지
    function fn_getText() {
      alert(target.innerText);
    }
    
    // html태그를 문자열로 그대로 변경
    // inner : 자식의 텍스트 노드 변경, outer : 자신의 노드까지 변경
    function fn_setText() {
      target.innerText = '<li>HTML</li><li>CSS</li>';
    }
  </script>
</body>
</html>

insetAdJacentHTML

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

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

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

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

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

<!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>
    <li>Content</li>
  </ul>
  
  <input type="button" value="beforebegin" onclick="fn_beforebegin()">
  <input type="button" value="afterbegin" onclick="fn_afterbegin()">
  <input type="button" value="beforeend" onclick="fn_beforeend()">
  <input type="button" value="afterend" onclick="fn_afterend()">
  
  <script>
    var target = document.querySelector('ul');
    var num = 1;
    
    function fn_beforebegin() {
      target.insertAdjacentHTML('beforebegin', '<h2>BeforeBegin' + num++ + '</h2>'); 
    }
    
    function fn_afterbegin() {
      target.insertAdjacentHTML('afterbegin', '<li>afterbegin' + num++ + '</li>'); 
    }
    
    function fn_beforeend() {
      target.insertAdjacentHTML('beforeend', '<li>beforeend' + num++ + '</li>'); 
    }
    
    function fn_afterend() {
      target.insertAdjacentHTML('afterend', '<h2>afterbegin' + num++ + '</h2>'); 
    }
  </script>
</body>
</html>

PreviousjQuery 노드 변경 APINextDocument 객체

Last updated

Was this helpful?