바닐라 JavaScript(외부 라이브러리 없는 순수 JavaScript)만으로 버튼 클릭 시 배열의 항목들을 div 요소에 표시하는 방법을 알아보겠습니다. 핵심 원리는 아주 간단합니다. 배열을 반복(iterate)하면서 각 요소를 대상 div에 계속 추가(append)하는 것입니다.
핵심 코드 예제
다음은 forEach() 메서드를 활용한 기본 구현 방식입니다.
const myArray = ["stone","paper","scissors"];
const embedElements = () => {
myArray.forEach(element => {
document.getElementById('result').innerHTML +=
`<div>${element}</div><br />`;
// 여기서 result는 DOM에 존재하는 div의 id입니다.
});
};
위 코드는 배열 요소를 표시할 대상 div가 id="result"를 가지고 있다고 가정합니다. innerHTML 속성에 새로운 HTML 문자열을 계속 더해주는(+=) 방식으로 요소를 하나씩 추가합니다.
완성된 전체 코드
버튼 클릭 이벤트와 함께 실제로 동작하는 완전한 HTML 문서는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="result"></div>
<button onclick="embedElements()">Show Data</button>
<script>
{
const myArray = ["stone","paper","scissors"];
function embedElements(){
myArray.forEach(el => {
document.getElementById('result').innerHTML += `<div>${el}</div><br />`;
// here result is the id of the div present in the dom
});
};
}
</script>
</body>
</html>
실행 결과
페이지를 처음 열면 위와 같이 빈 상태에서 “Show Data” 버튼만 표시됩니다. 이 버튼을 클릭하면 다음과 같이 배열의 모든 항목이 div 안에 순서대로 나타납니다.
추가 팁: 성능과 보안을 고려한 개선 방법
innerHTML += 방식은 구현이 간편하지만, 클릭할 때마다 기존 내용 전체를 다시 파싱해야 하므로 데이터 양이 많아지면 성능이 저하될 수 있습니다. 다음과 같이 createElement()와 appendChild()를 사용하면 더 효율적으로 처리할 수 있습니다.
function embedElements(){
const container = document.getElementById('result');
myArray.forEach(el => {
const item = document.createElement('div');
item.textContent = el;
container.appendChild(item);
});
}
또한 textContent를 사용하면 HTML 태그가 해석되지 않으므로, 사용자 입력값을 표시할 때 XSS(크로스 사이트 스크립팅) 공격으로부터 더 안전합니다. 간단한 데모에는 innerHTML 방식이 편리하고, 실제 서비스에서는 createElement 방식을 권장합니다.