다시 웹 브라우저로 보면 추가된 노드가 보입니다.

그림 12-20 실행결과

hn, p, span, i 태그처럼 일반적으로 텍스트가 필요한 요소들은 이렇게 텍스트 노드만 생성하고 연결해도 충분합니다. 하지만 a 태그나 img 태그처럼 별도의 속성이 필요한 요소들은 텍스트 노드만으로 충분하지 않습니다. a 태그에는 href 속성, target 속성 등이 있었죠? 이런 속성이 포함된 요소들은 속성 노드까지 생성해 연결해야 합니다.

<script>
  (중략)
  // href 속성 노드 추가하기
  const hrefAttr = document.createAttribute("href");
  hrefAttr.value = "https://www.gilbut.co.kr";
  document.querySelector("a").setAttributeNode(hrefAttr);
</script>