[자바스크립트] document.createElement 더 편하게 사용하기

자바스크립트에서 동적으로 html 요소를 생성하는 방법으로 document.createElement() 메서드가 있다.

 

let newDiv = document.createElement('div');
console.log(newDiv); //<div></div>

 

근데 여기에 클래스도 추가하고 id도 추가하고 input을 생성했으면 value도 추가하고 여러 옵션들을 달아줘야 하는데

 

이걸 다 수작업으로 추가해주면 코드가 아주 더러워진다.

 

 

 

name 과 id가 myInput이고 class가 myClass, value가 '더러워' 인 input 요소를 만들어서 div 안에 집어넣는 코드를 예시로 한번 짜보자.

 

let newInput = document.createElement('input');
newInput.setAttribute('name', 'myInput');
newInput.setAttribute('id', 'myInput');
newInput.setAttribute('value', '더러워');
newInput.classList.add('myClass');
document.querySelector('div').append(newInput);

 

고작 html 요소 하나 추가하는데 6줄이나 작성을 해줘야 한다.

 

그리고 나중에 수정하려고 볼때도 뭐가 뭔지 알아보기 힘들다. 이게 id야 class야...왜 추가한거야...?

 

 

 

이런 노가다를 안하려고 우리가 함수를 만드는것이다.

 

함수를 한번 제대로 만들어두면 이런 반복작업 하기가 훨씬 수월하다.

 

그럼 한번 만들어보자.

 

---

 

function createElement(type, attributes) {
	var element = document.createElement(type);
	for (var key in attributes) {
		if (key == 'class') {
			element.className = attributes[key];
		} else if (key == 'data') {
			for (var dataKey in attributes[key]) {
				element.setAttribute(`data-${dataKey}`, attributes[key][dataKey]);
			}
		} else if (key == 'html') {
			element.innerHTML = attributes[key];
		} else {
			element[key] = attributes[key];
		}
	}
	return element;
}

let test = createElement('input', {
	class: 'myClass',
	id: 'myInput',
	name: 'myName',
	value: '더러워',
	data: {
		index: 1,
	},
});

console.log(test) //<input class="myClass" id="myInput" name="myName" data-index="1">

 

 

자 이렇게 함수를 만들어보았다. 자세히 하나씩 살펴보자.

 

 

 

1. 파라미터로 html요소의 type과 속성(attributes)들을 가져온다.

 

2. document.createElement() 메서드로 type에 해당하는 html 요소를 만든다.

 

3. for in 반복문으로 attributes 의 key값들을 순회한다. (파라미터로 넘겨주는 attributes는 객체다.)

 

4. 각 key 값과 value를 html 요소의 속성에 부여한다.

 

5. 이 때 다른 로직을 적용해줄 녀석들은 if문으로 예외처리해준다. (나 같은 경우에는 class, dataset, innerHTML을 예외처리함)

 

6. 속성이 부여된 html요소를 return 해준다.

 

 

 

훨씬 보기도 편하고 사용하기도 쉽지 않은가?

 

일단 어떤 html요소를 생성했고 어떤 속성들을 부여해주었는지가 한눈에 보인다.

 

그리고 해당 함수는 자신이 원하는 대로 옵션을 추가해줄 수 있다.

 

특정 key값이 들어왔을때 다른 로직을 적용해주고 싶다면 예외처리를 해주면 된다.

 

함수가 정교해질수록 이후에 개발이 편해진다^^...

 

단, 너무 정교하게 만들다가 함수 자체 로직이 너무 커져버리면, 코드를 짠 자신도 어떤 옵션을 파라미터로 넘겨줘야 하는지 까먹어버리는 대참사가 일어날 수 있기에 주의하길 바란다.