티스토리 뷰

Javascript

[Javascript] <form>, <input> 동적 생성

개발 집사 2022. 3. 3. 11:32

1. Javascript

document.createElement() 메서드를 사용하여 <form> 태그와 그 안에 들어갈 <input> 태그를 만들고 DOM 내부에 존재하는 <body> 태그에 만든 양식을 추가하여 이벤트 실행

/* Javascript */

	// 동적 form 생성
    let form = document.createElement('form'); 
    // form 세팅
    form.method = 'post';
    form.action = 'url';
    form.name = 'newForm';
    form.target = '_blank';
    form.encType = 'application/x-www-form-urlencoded'; // encoding - <form> 요소의 method 속성값이 “post”인 경우에만 사용할 수 있음

    // key, value로 이루어진 객체 params
    const params = { 
        key1: "value1",
        key2: "value2",
        key3: "value3"
    }

    // 동적 input 생성 & 세팅
    for (const key in params){ 
        const formField = document.createElement('input');
        formField.type = 'hidden'; 
        formField.name = key; 
        formField.value = param[key];
        form.appendChild(formField); // form에 input 추가
    }
    
    document.body.appendChild(form); // body에 form 추가
    
    form.submit(); // 전송

2. 결과

/* HTML */

<form method="POST" action="url" name="newForm" target="_blank" enctype="application/x-www-form-urlencoded">
    <input name="key1" value="vlaue1">
    <input name="key2" value="vlaue2">
    <input name="key3" value="vlaue3">
</form>

 

 

Document.createElement()

HTML 문서에서, Document.createElement() 메서드는 지정한 tagName의 HTML 요소를 만들어 반환합니다.

구문

let element = document.createElement(tagName[, options]);

매개변수

tagName : 생성할 요소의 유형을 가리키는 문자열.

options : 속성 하나를 가진 ElementCreationOptions 객체. 속성의 값은 customElements.define()을 사용해 정의한 사용자 정의 요소입니다.

 

'Javascript' 카테고리의 다른 글

[JavaScript] 변수와 배열 값 바꾸기 – swap  (0) 2025.04.07
[JavaScript] 문자열 길이 기준으로 정렬하기 - sort  (0) 2025.04.07
즉시실행 함수 IIFE  (0) 2022.04.07
[JavaScript] append()와 appendChild()의 차이  (0) 2022.03.04
[Javascript] Post 방식으로 데이터 전송  (0) 2022.03.03