🔥 [UIUX] 0205 JAVASCRIPT Coding, 코딩 초급~고급 20

✏️ 2025. 02월 05일 / javascript 초급~고급 20

💡 속성이 있는 노드 추가하기
html 태그에서는 여러가지 속성을 사용하여 웹 요소를 제어합니다.
따라서 새로운 요소를 만들면 그와 관련된 속성노드도 만들어서 자식노드로 연결해야 합니다.

      1. 요소 노드 만들기
      : .createElement()메서드를 사용하여 태그의 형태를 먼저 만듭니다.
      2. 속성 노드 만들기
      : 요소 노드를 만드는 .createElement()메서드를 사용하여 요소노드를 만들었다면
        그 다음으로는 속성 노드를 만드는 .createAttribute()메서드를 사용해야 합니다.
        속성명을 만든 이후에는 속성 값을 추가해야 합니다.
        속성값을 추가할때에는 속성노드.value 프로퍼티를 이용합니다.
        💛
        [기본형]
        let 변수 = document.createAttribute('속성명');
        변수.value = '값';
      3. 속성 노드 연결하기
      : 속성 노드는 요소 노드의 자식으로 연결해야 합니다.
        새로 만든 속성 노드를 요소 노드에 추가하려면 setAttributeNode()메서드를 이용해야 합니다.
        만약 추가할 속성이 요소노드에 이미 들어가 있다면 기존 속성 노드를 새 속성 노드로 대체합니다.
        💛
        [기본형]
        부모노드(태그껍데기, 요소명).setAttributeNode(속성노드);
      4. 자식 노드 연결하기
      : 위 단계까지는 속성과 속성값을 연결한 상태이고, 요소 노드와는 연결되지 않은 상태 입니다.
        그래서 속성과 요소 노드를 연결하려면 .appendChild()메서드를 사용해야 합니다. 

    <script>
      function addContant() {
        //p요소 노드 생성
        let newP = document.createElement("p"); //<P></p>
        let text = document.createTextNode("바사삭!😋 고소한 향기가 솔솔~"); //텍스트노드 생성
        newP.appendChild(text); //부모노드에 자식노드 연결
        //img 요소 노드 생성
        let newImg = document.createElement("img"); //<img/>
        let srcNode = document.createAttribute("src"); //src 속성 노드 만들기 (값 없음)
        let altNode = document.createAttribute("alt"); //alt 속성 노드 만들기 (값 없음)
        srcNode.value = "./img/chicken.jpg"; //src 속성에 값 추가
        altNode.value = "치킨"; //alt 속성에 값 추가
        // <img src = '경로' alt = '값' />
        newImg.setAttributeNode(srcNode); // img태그에 속성 연결
        newImg.setAttributeNode(altNode); // img태그에 속성 연결
        //id = info에 newP,newImg 속성 추가하기
        document.getElementById("info").appendChild(newP);
        document.getElementById("info").appendChild(newImg);
      }
    </script>