seong

JS 기본 문법 - 객체 생성 (JQuery, JS) 본문

JavaScript/JS

JS 기본 문법 - 객체 생성 (JQuery, JS)

hyeonseong 2022. 9. 14. 15:57

아래 코드를 바닐라, JQuery 두가지 방식으로 객체 생성 해보기 

<div class= "item">${id}</div>

1. 바닐라 자바스크립트로 객체 생성 하기.

<div class="box">
        <div class= "item">1</div>
</div>

<script>

//<div class= "item">${id}</div>
function getItemObject(id){
            let divDom = document.createElement("div"); // 
            divDom.className = "item";
            divDom.innerHTML = id;
            return divDom;
        };
$(".box").prepend(getItemObject(2));

</script>

2. JQuery로 객체 생성하기 

 <div class="box">
        <div class= "item">1</div>
</div>

<script>

function getItemObjectJquery(id) {
            let divDom = $(`<div class="item">${id}</div>`);
            return divDom;
        }
        
       $(".box").prepend(getItemObjectJquery(3)[0]);
       console.log("객체", getItemObjectJquery(3)[0]);
       
</script>