[자바스크립트 js / 실무 기록] appendChild, setAttribute 실무 / ajax 실무

function detail_view(e){       
    $.ajax({
        type:"GET",
        url: ``,
        dataType:"json",
        async : true,
        status : 0,
        beforeSend : function(xhr){
            //xhr.setRequestHeader("Access-Control-Allow-Origin", "*"); 
            xhr.setRequestHeader("Content-Type", "text/html"); 
            //mask.open(lodingMsg);
            mask.open({
                content: '<h1><i class="fa fa-spinner fa-spin"></i> 로딩중</h1>'
              });
        },
        success : function(data, status, xhr) {
            mask.close();  
            console.log('유야호~!', data);

            $('.challNO').text(data.chall.NO);
            $('.challOK').text(data.chall.OK);

            //클릭할 때마다 중복되서 보이지 않도록
            var cell = document.getElementById('rightWrap');
            while (cell.hasChildNodes()) {
                cell.removeChild(cell.firstChild);
            }
            
            for (let index = 0; index < data.emp.length; index++) {     
                //변수를 class처럼 사용.
                var chall = document.createElement('div');
                var right = document.getElementById('rightWrap');
                var top = document.createElement('div');
                var bottom = document.createElement('div');
                var img = document.createElement('img');                
                var nameWrap = document.createElement('div');
                var name = document.createElement('p');
                var position = document.createElement('p');
    
                console.log('right',right);
                    right.appendChild(chall);
                    chall.setAttribute('class', 'chall');
                    chall.appendChild(top);
                    top.setAttribute('class', 'top');
                    top.appendChild(img);
                    img.setAttribute('src', '../img/chall.png');
                    img.setAttribute('class', 'challIcon');
                    img.setAttribute('alt', '챌린지 아이콘');
                    top.appendChild(nameWrap);
                    nameWrap.setAttribute('class', 'nameWrap');
                    nameWrap.appendChild(name);
                    name.setAttribute('class', 'name');
                    name.innerHTML=data.emp[index].EMP_NAME;
                    nameWrap.appendChild(position);
                    position.setAttribute('class', 'position');
                    position.innerHTML= data.emp[index].IS_MANAGER == 1 ? '[점주]' : '[직원]';
                    chall.appendChild(bottom);
                    bottom.setAttribute('class', 'bottom');

					// 사람 정보에 해당하는 이미지 추가
                    if (data.emp[index].CHALLENGE.length > 0 ) {
                        for (let i = 0; i < data.emp[index].CHALLENGE.length; i++) {
                            var img2 = document.createElement('img');
                            bottom.appendChild(img2);
                            img2.setAttribute('class', 'img');
                            img2.setAttribute('src', data.emp[index].CHALLENGE[i].URL);                        
                        }
                    }else{
                        var empty = document.createElement('p');
                        bottom.appendChild(empty);
                        empty.innerHTML='도전하지 않았습니다.'
                    }

					// 이미지 클릭하면 해당 이미지 확대 모달
                    $('.img').on('click', function(){
                        $('#imgModal').fadeIn();
                        e.preventDefault();
                            
                        var imgView = document.getElementById('imgView');
                        imgView.setAttribute('src', this.src);

                    })                   
            }
        },
        complete : function(xhr, status) {
        },
        error : function(xhr, status, error) {	
        }
    });    
}

appendChild 로 자식 태그를 넣는다. 

 

[자바스크립트 js] 요소 노드 삭제 .remove / 요소 노드 이동 prepend, append, before, after

 

 

setAttribute 로 태그에 속성을 추가한다.

[자바스크립트 js] HTML 속성에 접근 .getAttribute / 속성 추가 및 수정 .setAttribute / 속성 삭제 .removeAtt