사용자 입력을 기반으로 입력 양식 요소를 동적으로 생성하려면 어떻게 해야 합니까?-JS 튜토리얼-php.cn

사용자 입력을 기반으로 입력 양식 요소를 동적으로 생성하려면 어떻게 해야 합니까?

Barbara Streisand

풀어 주다： 2024-10-27 10:16:30

원래의

309명이 탐색했습니다.

How Can I Dynamically Generate Input Form Elements Based on User Input?

사용자 입력을 기반으로 입력 양식 요소를 동적으로 생성

특정 개수의 입력 양식 요소를 추가해야 하는 작업이 주어지면 간단하고 효율적인 솔루션을 찾는 것이 당연합니다. .

이 시나리오에는 사용자가 원하는 입력 필드 수를 나타내는 값을 입력하는 입력 필드로 구성된 HTML 구조가 있습니다. 링크를 클릭하면 해당 개수의 입력 필드가 동적으로 생성되어야 합니다.

사용자 입력 검색

사용자가 입력한 정수 값을 검색하려면 다음을 사용할 수 있습니다. 링크에 첨부된 onclick 이벤트 핸들러. 입력 필드에 고유 ID를 할당하면 document.getElementById()를 사용하여 해당 값에 액세스할 수 있습니다.

<code class="javascript">var number = document.getElementById("member").value;</code>

로그인 후 복사

입력 요소 생성 및 추가

효율적으로 입력 요소를 추가하려면 새로 생성된 입력 필드를 추가할 컨테이너 요소(예:

)를 만드는 것이 좋습니다. document.createElement()를 사용하면 입력 요소를 생성하고, 해당 속성을 지정하고, 컨테이너에 추가할 수 있습니다.

<code class="javascript">var container = document.getElementById("container");

for (i = 0; i < number; i++) {
  // Append a text node
  container.appendChild(document.createTextNode("Member " + (i + 1)));

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

  // Append a line break
  container.appendChild(document.createElement("br"));
}</code>

로그인 후 복사

이 접근 방식을 사용하면 사용자 입력을 기반으로 컨테이너를 동적으로 채울 수 있습니다. 관련 필드만 표시되도록 하려면 새 요소를 추가하기 전에 hasChildNodes() 및 RemoveChild()를 사용하여 컨테이너를 지우는 것이 좋습니다.

위 내용은 사용자 입력을 기반으로 입력 양식 요소를 동적으로 생성하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!