JavaScript를 사용하여 양식 양식 요소를 동적으로 추가하는 방법의 예-JS 튜토리얼-php.cn

JavaScript를 사용하여 양식 양식 요소를 동적으로 추가하는 방법의 예

韦小宝

풀어 주다： 2018-01-22 09:57:28

원래의

3359명이 탐색했습니다.

이 글은 주로 Form 양식 요소를 동적으로 추가하는 JavaScript메소드를 소개합니다. JavaScript 양식 요소 작업의 사용법과 관련 기능을 예제 형식으로 분석합니다. JavaScript에 관심이 있는 친구들은 이 글을 참고하세요. 기사! 이전에 유사한 기사를 작성한 적이 있지만(예: javascript로 구현된 양식 요소 입력, 버튼 등 동적으로 추가) 이제는 비교적 초보적인 고급 및 간단한

시나리오를 만들어 보겠습니다.

게임 스크린샷을 업로드하세요. 배경 및 스크린샷 수 확실하지 않으므로 이 효과를 얻으려면 입력 노드를 동적으로 추가하는 방법을 사용하세요

사용된 주요 기능은 다음과 같습니다:

document.getElementById();

objNode .parentNode;

objNode .cloneNode();

objNode.removeAtrribute();

objNode.innerHTML();

objNode.appendChild();

html:

<p class="well well-sm">
  <p class="form-group">
    <label class="form-label">游戏截图:</label>
    <input type="file" name="jietu[]" class="form-input">
    <span class="form-tip" onclick="add_jietu()"><font color="#428bca">点击添加游戏截图</font></span>
  </p>
  <p class="form-group" id="add_jietu">
    <label class="form-label">游戏截图:</label>
    <input type="file" name="jietu[]" class="form-input">
  </p>
</p>

로그인 후 복사

javascript:

<script type="text/javascript">
function add_jietu()
{
  var add_jietu = document.getElementById(&#39;add_jietu&#39;);
  var nodeFather = add_jietu.parentNode;
  var node_clone = add_jietu.cloneNode();
  content = add_jietu.innerHTML;
  node_clone.removeAttribute(&#39;id&#39;);
  node_clone.innerHTML = content;
  nodeFather.appendChild(node_clone);
}
</script>

로그인 후 복사

참고:

1 js의 6번째 줄은 "clone node" 기능을 사용합니다. 복제된 노드에는 html이 없으며 9번째 줄의 코드를 채워야 합니다. content

2. 이 메소드로 생성된 변수 유형은 "노드 유형"이므로 addChild() 함수

3에서 얻은 변수입니다. 노드의 lastChild 속성은 텍스트 유형입니다(크롬 디버깅 창에 표시됨)