11/3 35-3 [JS] DOM4 노드 복사하기

cloneNode(true)

받은 템플릿을 복사해서

클릭버튼을 누르면 복사하는 이벤트를 만들 것 

 

받은 HTML

 

 

복제할 행이 있는 경우 복제

// 로드하기 : lode 쓰는 거 보다 DOMContentLoaded가 더 빠름!
window.addEventListener('DOMContentLoaded',function(){
	//복사할 템플릿 가져옴
    var data = [
      {no:2, title:"제목2", postDate:"2022-01-01", writer:"김길동1", hit:10},
      {no:3, title:"제목 입니다", postDate:"2022-02-03", writer:"박길동2", hit:5},
      {no:4, title:"내일 공약사항을 발표하겠습니다", postDate:"2022-05-03", writer:"박길동3", hit:15},
      {no:5, title:"축하드립니다", postDate:"2022-11-15", writer:"박길동4", hit:25},
    ];
    
     /*노드 생성 후 생성된 각 노드를 appand()함수로 추가하는건 너무 번거로움
       CloneNode()를 사용해 노드 복제 구현한다.               */
      
      //노드 가져오기
      var  tbodys = document.querySelectorAll('tbody');  //테이블 두 개를 우선 다 가져옴
      console.log(tbodys); //확인용
	  var btnDatas = document.querySelectorAll('.btnData'); //버튼도 우선 두 개 다 가져옴     
       //데이터가 있는(복제 할)행 가져오기
      var tr = tbodys[0].querySelector('tr'); 
      
	 btnDatas[0].onclick = function(){ //누르면 실행 할 버튼 이벤트
     	data.forEach(function(item,index){  // 더 간단하게 구현하는건 밑에서!
 			 //기존 tr 복제하기       
            var clone = tr.cloneNode(true)  // true 하면 자식의 자식까지 아주 싹 복사가 다 됨
 			console.log(clone);
            
            //복제한 tr에서 td들 가져와 배열의 데이터로 변경
            var tds = clone.querySelectorAll('td');
            tds[0].textContent = data[index].no; //<>태그 안의 값/텍스트 을 복제한 tds에 넣기위한 셋팅!
            tds[1].textContent = data[index]['title'];  // 여러가지 방법으로 가져옴  
            tds[2].textContent = data[index].postDate;
            tds[3].textContent = data[index]['writer'];
            tds[4].textContent = data[index].hit;            
            
/*            얻어 온 값들 첫 번째 tbody테그에 넣기
              방법1.
           tbodys[0].append(clone);  
              방법2.                           */
            tr.insertAdjacentElement('afterend',clone); //여기선 순서가 거꾸로네? 가져올 때 기준이 계속 tr 니까
            tr=clone; // 기준을 복제 한 클론으로 갱신을 해 줘야 그 뒤에 순차적으로 붙음! 
        });
     };
});

 

복제할 행이 없는 경우

복제할 게 없으면 template 이라도 복사해 와야 하나?
하지만 template 태그는 랜더트리에 없어... 안보여.. 일반적인 방법으로 못 가져옴

var template = document.querySelector('template');
var tr2 = template.querySelector('tr');
console.log('tr1:',tr2);  // 찍어보면  null 나옴... 이렇게 못 가져온다

 var template = document.querySelector('template')
 console.log('template:',template);  //template:<template> 요따구로나와서 쓸 수가 없음
 console.log('template.content:',template.content); //요렇게 template의 컨텐츠를 꺼내와야  [ #text, tr, #text ] 쓸게 나옴 !
 
 // 가쟈
 //아까 위에서 btnData 다 가져온 거 활용
 btnDatas[1].onclick=function(){
    data.forEach(function(item){   // 이번엔 index 없이 
    	var clone = document.importNode(template.content,true);
              //현재 DOM이 아닌 외부 DOM의 노드를 복사하여 현재 DOM에 넣을 수 있도록 해 줌!
              //var node = document.importNode(externalNode, deep);
 		console.log(clone);
   		var tds = clone.querySelectorAll('td');
   		tds[0].textContent = item.no; //<>태그 안의 값/텍스트 을 가져오기!
    	tds[1].textContent = item.title;
        tds[2].textContent = item.postDate;
        tds[3].textContent = item.writer;
        tds[4].textContent = item.hit;
        //복제한 값 담기
        tbodys[1].append(clone);   
    }); 
 };

DOM API 사용하기:노드복제 하기

데이타 뿌려주기(복제할 행이 있는 경우)

---

번호	제목	작성일	작성자	조회수
1	제목1	2022-09-01	가길동	20

데이타 뿌려주기(복제할 행이 없는 경우)

---

번호	제목	작성일	작성자	조회수