[Javascript] 요소를 복사하여 사용하기 - JS clone

[목표]

받아온 데이터를 생성 된 html에 값을 할당해 데이터의 수 만큼 복제하고 싶다!  

 

[html 생성]

아래와 같이 html이 있다고 하쟈 

<div class="grp_1">
    <div class="grp_2" style="display: flex;">
        <div class="jmLogo"></div>
        <span class="jmPrice"></span>
    </div>
</div>

 

[script 구현] 

makeList 라는 함수를 정의해서 저기에 데이터를 넣으면 바로 실행 되게 해주자 

function makeList(data) {
let $clone = gb_2.$html.clone(); //복사할 개체를 선택해서 $clone 이라는 걸 만들어준다 

for (var i = 0; i < data.length; i++){ //데이터의 길이만큼 돌면서  
    let jmLogo = data[i].logo;  //데이터 안에 있는 로고들을 선언해준다 
    let jmPrice = data[i].price; //데이터 안에 있는 가격들을 선언해준다 

    let $jmPriceClone = $clone.find('.jmPrice');  
    // $clone 안에 jmPrice라는 클래스를 가진 내용을 선택 해준다 

//금액에 따라 컬러 다르게 지정 
    if (jmPrice.toString().startsWith('-')) {
        $jmPriceClone.css('color', 'blue');
    } else if (jmPrice == '0.0') {
       $jmPriceClone.css('color', 'black');      
    } else {   
        $jmPriceClone.css('color', 'red');
    }

//jmLogo 라는 클래스를 가진 요소를 찾아 거기에는 jmlogo를 넣어준다
    $clone.find('.jmLogo').text(jmlogo);  

//그리고서는 제일 큰 div 인 gb1 에 $clone 한 요소들을 덧붙여서 화면을 완성한다
    gb1.$html.append($clone);
}
}

]