KoXo 자바스크립트 - 메서드(method)

개체	script	IE
document	document.createElement(sTag)	IE4.0(win16,win32,ce,unix,mac)

제어 선택 :
텍스트 선택 :

결과 표시창

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>

document.write(fileName)createElement 메서드 예제

createElement 메서드 예제