728x90
반응형
예전에 카카오맵API를 Vue컴포넌트 기반으로 가져오는 연습을 했었는데.. ( 글 참조 )
그때 썼던 게 document.createElement() 함수였다.
그리고 이 녀석들과 같이 쓰는 함수들은 아래와 같은데
document.createElement() //요소(태그) 생성
document.createTextNode() // 요소(태그)안에 텍스트 생성
document.[head or body].appendChild() //요소(태그)를 헤더나 바디에 부착
그럼 바로 테스트를 통해서 알아보자.
스크립트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
new Vue({
el : '#app',
mounted() {
// <h1>태그를 생성하여 script변수에 담음
let script = document.createElement('h1');
// <h1>태그 안에 들어 갈 텍스트를 txt변수에 담음
let txt = document.createTextNode('createElement 테스트입니다.');
// <h1>태그를 담은 script변수에 txt변수를 append(추가) 해줌
script.appendChild(txt);
// <h1>태그를 담은 script변수에 이벤트 리스너를 추가해줌
script.addEventListener('click', this.popMethod);
// DOM의 body영역에 script를 append 해줌
document.body.appendChild(script);
},
methods: {
popMethod : function(){
alert('addEventListener테스트입니다.');
}
},
})
</script>
</html>
이렇게 하면 정상적으로 body태그 안에 해당 스크립트 태그가 부착이 될 것이다.. 아래는 실행결과
그리고 클릭을 하면 팝업창이 뜨면서 이벤트 리스너도 제대로 들어 간 것을 확인 할 수 있다.
<script> 태그에 src 속성을 넣어 외부 라이브러리 ( cdn )등을 가져 올 수도 있다. 해당 건은
카카오맵API 글에 있으니 참고 하도록 하자.
728x90
반응형
'FrontEnd > JavaScript' 카테고리의 다른 글
| [JS] javascript 문자열을 구분자를 이용하여 배열로 변환해보자 ( feat. split함수 ) (0) | 2022.03.09 |
|---|---|
| [JS] javascript 배열을 구분자를 이용해 문자열로 변환해보자. ( feat . join함수, map함수) (0) | 2022.03.09 |
| [JS] ES6 : map에서 반복문을 실행 해보자. ( for of, forEach ) (0) | 2022.03.05 |
| [JS] 자바스크립트 :: Object(객체)의 for문 사용방법 (0) | 2022.03.05 |
| [JS] ES6 : Map()에 대하여 ( feat. set(), get(), has(), clear(), delete(), size ) (0) | 2022.03.05 |
