[ES6+] HTML Fragment

기존 자바스크립트에서는 쿼리셀렉터나 아이디, 클래스명, 태그명으로 엘리먼트들을 선택해서 그 기준으로 붙이고 빼고 아주그냥..

복잡했다.

예시 코드를 보자

const wrapper = document.querySelector(".wrapper");

const addWelcome = () =>{
	const pie  = document.createElement("div");
	const h1 = document.createElement("h1");
	h1.innerText = "hello";
	h1.className = "imTitle";
	div.append(h1);
}

setTimeout(addWelcome, 2000);

이런식으로 말이다…. h1에 클래스명도 넣고 싶고, 문자열도 넣고 싶고 이것저것 넣고넣다보면 html규모가 엄청 커지게 되는데

이때 html조각을 넣어주면 얼마나 간단해질까.. 하는 개념에서 나온게 HTML fragment이다.

fragment는 조각이라는 뜻으로 여러곳에서 쓰이고 있다!

여튼 html fragment를 이용하게 되면

const wrapper = document.querySelector(".wrapper");

const addWelcome = () =>{
	const pie  = `
		<div class="ttclass">
			<h1 class="subTitle">Helllllooooo</h1>
		</div>
	`;
	wrapper.innerHTML = pie;
}

setTimeout(addWelcome, 2000);

벡틱을 이용하면 줄바꿈도 가능하다!!!!!(짱신기)

스페이스를 먹는다는 소리이다ㅎㅎㅎ

그냥 쿼테이션으로하게되면 줄바꿈 안먹음

노마드코더의 ‘ES6의 정석’을 듣고 정리 =)

Share this post