JavaScript로 순서 없는 목록(UL)에 항목을 추가하고 줄바꿈 처리하는 방법

순서 없는 목록(Unordered List, UL)에 새 항목을 줄바꿈 형태로 추가하려면 document.querySelector()와 append() 메서드를 함께 사용하면 됩니다. 사용자가 입력한 값을 텍스트 박스에서 읽어와 <li> 요소를 동적으로 생성한 뒤, 목록에 추가하는 방식입니다.

예제 코드

아래는 이름을 입력받아 UL 목록에 하나씩 추가하는 완전한 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
    h1{
        font-size: 2.50rem;
    }
    h2, label{
        font-size: 1.50rem;
    }
</style>
</head>
<body>
<h1>이름 추가 데모</h1>
<div>
<label>이름 입력:</label>
<input class="txtName" type="text" />
<button class="btnName">저장</button>
</div>
<h2>이름 목록</h2>
<ul class="listOfName"></ul>
<script>
    const buttonName = document.querySelector('.btnName')
    const addName = e => {
        let nameTxt = document.querySelector('.txtName'),
        name = nameTxt.value.trim()
        if (name) {
            let tagLi = document.createElement('li')
            tagLi.textContent = name
            document.querySelector('.listOfName').append(tagLi)
            nameTxt.value = ''
        }
    }
    buttonName.addEventListener('click', addName)
</script>
</body>
</html>

코드 실행 방법

위 프로그램을 실행하려면 파일 이름을 "anyName.html(index.html)"로 저장한 후, 해당 파일을 마우스 오른쪽 버튼으로 클릭합니다. 그다음 VS Code 편집기에서 "Open with Live Server" 옵션을 선택하면 브라우저에서 결과를 확인할 수 있습니다.