(JS 리팩토링) createElement로 생성한 여러 element를 한 번에 append하는 방법

Question

안녕하세요, js 리팩토링 관련하여 여쭙고자 합니다.select element를 담은 배열과 map을 담은 배열 데이터를 받아 select에 option을 넣어주는 코드를 리팩토링 하고 있습니다.기존 코드는 어떻게 되어있었냐면// ES5 환경 function makeOption(elemArr, optionArr) { // elemArr : select element를 담은 배열, optioArr : option을 만들 데이터 elemArr.forEach(function(elem) { optionArr.forEach(function(item) { var option &#61; document.createElement(&#34;option&#34;) option.setAttribute(&#34;value&#34;, item.value); option.innerText(item.text); elem.append(option); }); }); }이런 식으로 배열 길이 N x M 형식의 코드였습니다.이 코드를 리팩토링 하기 위해 우선 createElement보다 cloneNode가 속도가 조금 더 빠르다고 하여 cloneNode로 교체하고 그 다음 미리 option을 만들어 elemArr 배열의 반복문을 돌 때마다 optionArr 배열의 반복문을 타지 말고 바로 만들어 둔 option들을 넣어주고 싶다는 생각을 하였습니다.function makeOption(elemArr, optionArr) { // 옵션들을담을무언가. 우선 배열로 표현. jsx에서 fragment 같은 역할을 할 수 있을 법한 무언가가 없으려나... var something &#61; [] var optionElem &#61; document.createElement(&#34;option&#34;); optionArr.forEach(function(item) { var cloneElem &#61; optionElem.cloneNode(); cloneElem.setAttribute(&#34;value&#34;, item.value); cloneElem.innerText(item.text); something.push(cloneElem); }); elemArr.forEach(function(elem) { elem.append(something) // ...??? 이런 느낌으로... }); }당연히 위 코드는 동작하지 않겠지만 위의 코드처럼 N x M이 아닌 N &#43; M으로 option을 append 하고 싶은데 좋은 방법 없을까요?div에 담아서 넣는다고 하더라도 select에 option을 담은 div를 넣는다고 동작하진 않을테니.. ㅠ

양2갱 · Answer

https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement/Optionlist.forEach(function(item) { var option = new Option(item.text, item.value); selectElement.appendChild(option); });

(JS 리팩토링) createElement로 생성한 여러 element를 한 번에 append하는 방법

1개의 답변

Q&A 목록