지정된 태그의 엘레멘트를 생성한다.
반환값 oVal는 새로이 생성된 엘레멘트를 반환한다.
IE4.0에서는 img,area와 Option 개체만 새로이 생성할 수 있었다. IE5에서는 frame과 iFrame을 제외하고 모든 엘레멘트를 프로그램적으로 생성할 수 있게 되었다. 또한 이 생성된 엘레멘트의 속성들도 프로그램적으로 읽기/쓰기가 가능하게 되었다. 새로운 개체를 사용하기 전에 문서나 해당 컬레션에 명시적으로 그들을 추가하여야 한다. 현재 문서에 새로운 엘레멘트를 삽입사고저 할 때는 insertBefore 혹은 appendChild 메서들을 사용하면 된다.
input 엘레멘트를 생성하기 위해서 createElement 메서드를 사용할 때는, 다음단계 과정을 수행하여야 한다. 이것이 디폴트 input type 속성이므로 createElement 메서드로 입력 텍스트 박스를 생성한다. 다른 종류의 input 입력 엘레멘트를 삽입하기 위해서는 먼저 input를 위한 createElement를 하고, 코드의 다음 부분에 적당한 값의 type 속성을 설정한다.
애트리뷰트들이 모든 문자열이 유효한 HTML 문자열이 되도록 sTag에 포함될 수 있다. 이름 속성을 지정하려면 런타임에 createElement 메서드로 생성된 개체에 name을 포함 시킬 수 있다.
엘레멘트가 생성될 때 sTag에 애트리뷰트들이 포함되어야 하고, reset 메서드나 type 애트리뷰트 값 reset인 BUTTON을 사용하여 재설정된다.
| 개체 | script | IE |
|---|
이 메서드는 (영어)DOM Level 1(Document Object Model Level 1)에서 정의되었다.
createElement 메서드를 사용하여 탄력적으로 웹페이지 내용을 변경시킨다.
<SCRIPT>
function fnCreate(){
oData.innerHTML='';
var oOption=oSel.options[oSel.selectedIndex];
if(oOption.text.length>0){
var aElement=document.createElement(oOption.text);
eval('aElement.'+oOption.value+'="'+oText.value+'"');
if(oOption.text=='A') aElement.href='javascript:alert("A link.")';
}
oData.appendChild(aElement);
str='oData.children.length='+oData.children.length+'<BR>';
str+='oData.children[0].nodeName='+oData.children[0].nodeName+'<BR>';
str+='oData.children[0].value='+oData.children[0].value+'<BR>';
str+='oData.children[0].innerText='+oData.children[0].innerText+'<BR>';
str+='oData.children[0].href='+oData.children[0].href+'<BR>';
str+='<BR>';
for (i=0;i< oSel.options.length;i++){
str+=i+'] oSel.options['+i+'].text='+oSel.options[i].text;
str+=', oSel.options['+i+'].value='+oSel.options[i].value+'<BR>';
}
str+='<BR>';
for (i=0;i< oText.options.length;i++){
str+=i+'] oText.options['+i+'].text='+oText.options[i].text+'<BR>';
}
showA.innerHTML=str;
}
</SCRIPT>
제어 선택 : <SELECT id="oSel" onchange="fnCreate()">
<OPTION value="innerText">A
<OPTION value="value"><INPUT type="button">
</SELECT><BR>
텍스트 선택 : <SELECT id=oText onchange="fnCreate()">
<OPTION>
<OPTION value="텍스트">텍스트
<OPTION value="긴 문자열">긴 문자열</SELECT>
<DIV id="oData" style="border:solid 1 blue">결과 표시창</DIV>
<DIV id=showA style="border:solid 1 blue">결과 표시창</DIV>
"단추1", "단추2"라는 값으로 단추 엘레멘트가 생성된 후 문서 계통에 두번 삽입된다.
createElement 메서드 속에서 HTML 태그 문자열를 사용하여 엘레멘트의 모든 애트리뷰트를 지정할 수 있다.
<DIV id=example2>
<FORM id="fname">
<INPUT type="button" id="but1" onclick="makeButton()" value="단추를 생성함"><BR>
<INPUT type="button" onclick="alert (example2.outerHTML)" value="이 예제의 HTML 내용 보기">
</FORM>
<SCRIPT>
function makeButton(){
newElem=document.createElement('<INPUT type="button" name="button1" value="단추1">');
fname.insertBefore(newElem,fname.but1);
newElem=document.createElement('<INPUT type="button" name="button2" value="단추2">');
fname.insertBefore(newElem,fname.but1);
// document.body.insertBefore(newElem); 문서의 제일 뒤에 삽입하려면...
}
</SCRIPT>
</DIV>