[JavaScript]jQuery로 HTML문서에 요소 추가하기

jQuery에 내장된 $.ajax 함수를 이용해 웹서버에서 정보를 받아오고

 

그 정보들로 DOM을 형성해서 원래 페이지에 삽입하려고 한다.

 

이 때 내가 보고 있는 강의 자료에서는

 

tmp_HTML 이라는 변수를 선언하고 거기에 직접 HTML 코드를

 

백틱(`) 문자열로 입력한뒤 $.ajax로 받아온 정보들을 저장한 변수들을

 

${변수명}으로 기입하여, "html 문법으로 된 문자열"을 만들고

 

이를 html 요소 안에 .text() 메소드로 삽입하는 방법을 썼다.

 

난 이 방법이 마음에 들지 않았는데,

 

백틱으로 감쌌다지만 html 문법이 JS 스크립트 영역에서 보이는 자체가 마음에 들지 않았고,

 

만약 복잡한 형태의 요소를 html 문서에 추가하고 싶다면

 

이 방법으로 작성했을 시 가독성을 헤칠것처럼 보였기 때문이다.

 

내가 찾은 대안은 jQuery의 .clone() 메소드였다.

 

$(document).ready(function(){
    listing();
});

function listing(){
    $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/web/api/movie",
        data: {},
        success: function(response){
            let rows = response['movies']
            for (let i=0; i<rows.length; i++) {
                let comment = rows[i]['comment']
                let desc = rows[i]['desc']
                let image = rows[i]['image']
                let star = rows[i]['star']
                let star_img = '⭐'.repeat(star)
                let title = rows[i]['title']
                let card_col = $col.clone()
                card_col.show()
                card_col.find('.mycomment').text(comment)
                card_col.find('.card-text').text(desc)
                card_col.find('img').attr('src',image)
                card_col.find('.star').text(star_img)
                card_col.find('.card-title').text(title)
                card_col.appendTo($cards_box)
            }
        }
    })
}

const $btn_title = $('.mytitle button');
const $btn_reg = $('#btn_reg');
const $btn_close = $('#btn_close');

let $col = $('.col'); $cards_box = $('#cards-box');
let $postbox = $('#post-box');

$postbox.hide();
$col.hide();

$btn_title.click(function(){
    $postbox.show();
});
$btn_close.click(function(){
    $postbox.hide();
});

$btn_reg.click(function(){
    $col.clone().appendTo($cards_box);
});

먼저, 삽입하고자 하는 요소를 html 문서 상에 구현하고 (여기서는 class="col"이 부여되었다)

$() 함수로 변수에 할당하였다.

$col = $('.col')

이 원래의 요소는 hide()로 숨김처리를 한 뒤,

$.ajax 함수 안에서 복제했다.

let card_col = $col.clone()

그리고 이 복제된 요소를 show() 메소드로 화면에 표시되도록 하고

그 안에 $.ajax로 불러온 정보들을 필요한 곳에 삽입했다. (for loop 안의 부분들)

그 뒤 목표로 하는 html 요소 안에 card_col 을 appendTo로 삽입한다.

 

이 card_col의 html 구조(?)가 어떻게 되는지는 html 파일을 열어 "col" 클래스를 가진

태그를 확인하면 되고,

실제로 문서에 삽입되는 친구들은 해당 태그 안에 ajax에서 받아온 정보들이 삽입된

형태가 되는 것이다.