[javascript] 입력 폼에서 특정 요소의 위치 제어하기

11 Dec 2023

javascript

입력 폼을 디자인할 때 특정 요소의 위치를 제어하는 것은 매우 중요합니다. 이 포스트에서는 JavaScript를 사용하여 입력 폼의 특정 요소 위치를 제어하는 방법을 살펴보겠습니다.

1. HTML 입력 폼 생성하기

먼저 간단한 HTML 입력 폼을 생성해보겠습니다. 아래는 예시 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>입력 폼</title>
</head>
<body>
    <form>
        <label for="name">이름:</label>
        <input type="text" id="name" name="name"><br><br>
        <label for="email">이메일:</label>
        <input type="email" id="email" name="email"><br><br>
        <input type="submit" value="제출">
    </form>
</body>
</html>

2. JavaScript로 특정 요소 위치 제어하기

이제 JavaScript를 사용하여 입력 폼의 특정 요소 위치를 제어해보겠습니다. 아래 코드는 “이름”과 “이메일” 레이블을 입력 폼 제출 버튼 위에 오도록 하는 예제입니다.

window.onload = function() {
    var submitButton = document.querySelector('input[type="submit"]');
    var emailLabel = document.querySelector('label[for="email"]');
    var nameLabel = document.querySelector('label[for="name"]');

    submitButton.insertAdjacentElement('afterend', emailLabel);
    emailLabel.insertAdjacentElement('beforebegin', nameLabel);
};

이제 입력 폼을 새로고침하여 “이름”과 “이메일” 레이블이 제출 버튼 위에 위치한 것을 확인할 수 있습니다.

위 코드는 window.onload 이벤트를 사용하여 페이지가 로드될 때 실행됩니다. 그 후 querySelector를 사용하여 특정 요소를 선택한 후 insertAdjacentElement를 사용하여 해당 요소를 다른 요소의 전후에 삽입하는 방식으로 위치를 제어합니다.

위 예제를 통해 JavaScript를 사용하여 입력 폼의 특정 요소 위치를 제어하는 방법을 배웠습니다.

참고 문헌:

MDN Web Docs - insertAdjacentElement()