JavaScript에서 입력 양식 요소를 동적으로 생성하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

JavaScript에서 입력 양식 요소를 동적으로 생성하는 방법은 무엇입니까?

Barbara Streisand

풀어 주다： 2024-10-28 06:38:02

원래의

351명이 탐색했습니다.

How to Dynamically Generate Input Form Elements in JavaScript?

동적으로 입력 양식 요소 생성

이 문서에서는 사용자 입력을 기반으로 입력 양식 요소를 동적으로 생성하는 일반적인 프로그래밍 과제에 대해 자세히 설명합니다. 목표는 JavaScript를 사용하여 초보자에게 명확하고 간단한 솔루션을 제공하는 것입니다.

문제

웹 페이지에는 사용자가 숫자를 입력할 수 있는 텍스트 입력 필드가 있습니다. 해당 링크를 클릭하면 페이지는 사용자가 추가 정보를 제공할 수 있도록 많은 입력 필드를 동적으로 생성해야 합니다. 사용자는 최대 10개의 값을 입력할 수 있습니다.

솔루션 이해

사용자 입력 검색:
- An onclick 이벤트 핸들러는 입력 필드 생성을 담당하는 링크에 적용됩니다.
- 이벤트 핸들러 내에서 document.getElementById()를 사용하여 텍스트 입력 필드에 입력된 값을 검색할 수 있습니다.
컨테이너 만들기:
- id 속성(예: "container")이 있는 div와 같은 컨테이너 요소가 필요합니다. 동적으로 생성된 입력 필드를 유지합니다.
동적으로 요소 생성:
- document.createElement() 사용, new 입력 요소를 생성할 수 있습니다.
- 각 입력에 대해 유형 및 이름과 같은 속성을 설정해야 합니다.
- appendChild()는 각 입력 요소를 컨테이너에 추가하는 데 사용됩니다.
이전 요소 지우기:
- 중복을 방지하려면 새 요소를 생성하기 전에 컨테이너 내의 기존 하위 요소를 제거해야 합니다. hasChildNodes() 및 RemoveChild()를 사용하여 수행할 수 있습니다.
추가 개선 사항:
- 요소를 추가할 수 있습니다. 줄 바꿈(document.createElement("br")) 또는 텍스트 노드(document.createTextNode())와 같이 레이아웃을 개선합니다.

코드 예

다음 코드 조각은 솔루션 구현을 보여줍니다.

<html>
<head>
    <script type='text/javascript'>
        function addFields(){
            // Get number of inputs
            var number = document.getElementById("member").value;

            // Get container
            var container = document.getElementById("container");

            // Clear container
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }

            // Generate inputs
            for (i=0;i<number;i++){
                // Text node
                container.appendChild(document.createTextNode("Member " + (i+1)));

                // Input element
                var input = document.createElement("input");
                input.type = "text";
                input.name = "member" + i;
                container.appendChild(input);

                // Line break
                container.appendChild(document.createElement("br"));
            }
        }
    </script>
</head>
<body>
    <input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
    <a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
    <div id="container"/>
</body>
</html>

로그인 후 복사

위 내용은 JavaScript에서 입력 양식 요소를 동적으로 생성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!