JavaScript에서 동적으로 텍스트 상자를 만드는 방법

어떤 사람들은 그것을 마술이라고 부릅니다. 물체가 갑자기 갑자기 나타나게하는 능력입니다. 몇 줄의 JavaScript를 사용하여 웹 사이트에서 이러한 종류의 마법을 만들 수 있습니다. 예를 들어, 텍스트 상자는 개체를 동적으로 표시하는 방법을 배울 때 사용할 수있는 좋은 HTML 요소입니다. 웹 페이지를 디자인 할 때 코드를 작성하는 대신 필요에 따라 텍스트 상자를 추가하고 동시에 사이트 방문자에게 깊은 인상을 남깁니다.

텍스트 상자 생성

텍스트 상자를 구체화하기 전에 텍스트 상자가 무엇인지 이해해야합니다. HTML은 다음 예제와 같이 입력 태그로 인식합니다.

이 입력 태그는 두 가지 중요한 속성이있는 텍스트 상자를 만듭니다. ID 및 유형. 값이 "text"인 type 속성은 단추와 같은 다른 유형의 컨트롤 대신 텍스트 상자를 만들도록 브라우저에 지시합니다. 선택 사항 인 id 속성은 나중에 텍스트 상자를 조작해야하는 경우 유용 할 수 있습니다. 선택 사항이기도 한 값 옵션에는 웹 페이지가 열릴 때 텍스트 상자에 표시 할 값이 포함되어 있습니다.

동적 텍스트 상자

HTML은 어딘가에 값을 제공하는 한 요소의 속성을 정의 할 때 상관하지 않습니다. 즉, 텍스트 상자 요소를 동적으로 생성하고 원하는 시간에 속성을 설정할 수 있습니다. document.createElement 함수는 다음과 같이이를 가능하게합니다.

var box = document.createElement ( "input");

이것이 HTML 입력 요소를 생성하고 "box"라는 변수에 할당하는 데 필요한 전부입니다. 이 예제와 같이 type 속성에 "text"값을 부여 할 때까지 box 객체는 텍스트 상자가되지 않습니다.

box.type = "텍스트";

웹 페이지 통합

아래 코드는 유용한 appendChild 함수를 사용하여 HTML 문서에 텍스트 상자를 추가합니다.

document.body.appendChild (box);

특정 컨트롤 뒤에 텍스트 상자를 추가하려면 대신 다음 문을 사용합니다.

document.getElementById ( "some_Element_ID"). appendChild (box);

"some_Element_ID"를 텍스트 상자를 추가하려는 요소의 이름으로 바꿉니다. 예를 들어, 해당 요소가 ID가 "button1"인 버튼이면 appendChild 문은 다음과 같이 나타납니다.

document.getElementById ( "button1"). appendChild (box);

선택적 속성

이 코드를 사용하면 새 텍스트 상자가 완벽하게 작동합니다. 문을 포함하는 JavaScript 함수를 만들고 텍스트 상자가 필요할 때마다 호출하기 만하면됩니다. 그러나 다음과 같이 텍스트 상자의 값 및 ID 속성을 설정할 수도 있습니다.

box.value = boxValue; box.id = boxID;

boxValue 및 boxID 값을 함수에 전달하면 해당 속성이 텍스트 상자에 적용됩니다. ID 값을 할당하면 나중에 아래 예와 같이 텍스트 상자의 속성을 업데이트하는 데 사용할 수 있습니다.

var boxObject = document.getElementById (boxID); boxObject.style.backgroundColor = "빨간색";

첫 번째 문은 텍스트 상자에 대한 참조를 얻고 마지막 문은 텍스트 상자의 배경색을 빨간색으로 변경합니다.