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

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

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

이 시나리오에는 사용자가 원하는 입력 필드 수를 나타내는 값을 입력하는 입력 필드로 구성된 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

html Integer using Event append number this input Access

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.