속성 값이 있는 노드 추가하기
1. 요소노드 만들기 - createElement( )매서드
: DOM에 새로운 요소를 추가할 때 가장 먼저 해야 할 일은 요소 노드를 만드는 것이다.
이때 사용하는 매서드는 createElement( )매서드인데 괄호 안에 해당하는 요소 노드를 만들면 된다.
[기본형]
document.createElement('노드명');
2. 속성노드 만들기 - createAttribute( )매서드
: 속성 노드를 추가할 때 createAttribute( )매서드를 사용한다.
[기본형]
document.createAttribute('속성명' )
3. 속성로드에 값 추가하기 - .value프로퍼티
: 생성한 속성 노드에 값을 추가할 때에는 .value프로퍼티를 이용한다.
[기본형]
요소노드.value = '속성 값';
4. 속성노드를 부모 노드에 추가(연결)하기 - setAttributeNode( )매서드
: 속성 노드는 요소 노드의 자식으로 연결해야 한다. 새로 만든 속성 노드를 요소 노드에
연결하려면 setAttributeNode( )매서드를 사용한다.
만약 추가할 속성이 요소 노드에 이미 들어있다면 기존 속성노드를 새 속성 노드로 대체한다.
[기본형]
요소노드.setAttributeNode(속성노드)
속성노드가 변수면 문자열로 " "이 들어가지 않는다.
5. 속성노드를 연결한 요소노드를 부모노드에 추가(연결)하기 - appendChild( )매서드
: appendChild( )매서드는 텍스트 노드나 속성 노드를 만든 후 요소 노드에 연결할 때 사용한다.
이때 appendChild( )매서드를 사용해서 연결하는 노드는 자식노드 중 맨 끝에 추가된다.
[기본형]
부모노드. appendChild(자식노드);
예제) 더보기 버튼 클릭하면 p태그와 함께 img태그 나오기
html
<div id="container">
<h2>DOM노드 추가 삭제하기</h2>
<!-- 링크를 클릭하면 addP()함수가 한번만 실행되도록 한다. 뒤에 ''빈문자를 쓰면 한번만 실행되도록 하게 하는 것 -->
<a href="#" onclick="addP(); this.onclick='';">더보기</a>
<div id="info"></div>
</div>
자바스크립트
<script>
//속성 값이 있는 노드 추가하기
function addP() {
// 1. 새로운 p 요소 노드를 만들기
let newP = document.createElement("p"); //<p> </p>생성
//1-1. 새로운 img 요소 노드 만들기
let newImg = document.createElement("img"); //<img />생성
// 2. 새로운 p 요소 노드에 들어갈 텍스트 노드 만들기
let txtNode = document.createTextNode(
"DOM은 Document Object Model의 약자다"
);
// 2-1. 새로운 img 요소 노드에 들어갈 속성 노드 만들기
let srcNode = document.createAttribute("src");
let altNode = document.createAttribute("alt");
// 2-2. 속성 노드에 값 추가하기
srcNode.value = "./img/pic_8.jpg"; //src 속성값 지정
altNode.value = "바다"; //alt 속성값 지정
// 3. 텍스트 노드를 자식노드로 연결하기
newP.appendChild(txtNode);
// 3-1. 속성 노드를 자식노드로 연결하기
newImg.setAttributeNode(srcNode); //변수 이름이니깐 문자열로 들어가지 않는다.
newImg.setAttributeNode(altNode);
// 4. 부모태그요소인 #info에 newP를 자식 노드로 연결하기
document.getElementById("info").appendChild(newP);
// 4-1. 부모태그요소인 #info에 newImg를 자식 노드로 연결하기
document.getElementById("info").appendChild(newImg);
}
</script>
예제 2 ) 동적인 a태그 나오게 하기
(a태그 부분만 정리한 것) a태그는 속성노드와 텍스트 노드 둘 다 만들어줘야한다.
html
<div id="container">
<h2>DOM노드 추가 삭제하기</h2>
<!-- 링크를 클릭하면 addP()함수가 한번만 실행되도록 한다. 뒤에 ''빈문자를 쓰면 한번만 실행되도록 하게 하는 것 -->
<a href="#" onclick="addP(); this.onclick='';">더보기</a>
<div id="info"></div>
</div>
자바스크립트
function addP() {
// a. 새로운 a 요소 노드 만들기 - <a></a>완성
let newA = document.createElement("a");
//a-1. 새로운 a요소 노드에 텍스트 노드 만들기 -네이버 글자 완성
let aTxtNode = document.createTextNode("네이버");
//a-2. 새로운 a 요소 노드에 들어갈 속성 노드 만들기 -href속성 생성
let aNode = document.createAttribute("href");
//a-4. a텍스트노드를 a한테 자식 노드로 연결하기- <a>네이버</a>생성
newA.appendChild(aTxtNode);
//a-5 a속성노드를 a한테 자식 노드로 연결하기 -<a href = 주소> 네이버</a>
newA.setAttributeNode(aNode);
//a-6. 부모태그요소인 info에 newA 를 자식노드로 연결
document.getElementById("info").appendChild(newA);
}
이렇게 나오게 되고 누르면 네이버로 이동하게 된다.
