자바 스크립트에서 appendChild를 사용하는 데 문제가 있습니다.

Question

javacript 내에 두 개의 함수가 있습니다. createtext 및 createtextarea입니다. createtext() 버튼을 처음 클릭하면 텍스트 상자가 표시되고 다른 요소도 올바르게 작성됩니다.

그러나 createtextarea() 버튼을 클릭하면 createtext()까지 클릭하면 텍스트 영역이 표시되지 않습니다.

나는 ... 그것을 추가하는이 텍스트 상자를 얻을 후 텍스트 영역에만 표시됩니다 생각

<!-- File: /app/views/posts/index.ctp --> 

<?php echo $javascript->link('prototype'); 
echo $javascript->link('scriptaculous'); ?> 


<!--script starts here --> 

<script type="text/javascript"> 
var myForm;var fieldidctr=0;var labelidctr=0; 
window.onload=function() 
{ 
     // Create a form 
    myForm = document.createElement('FORM'); 
    myForm.method = 'post'; 

    myForm.id = 'myForm'; 
     fieldidctr=1; 
     labelidctr=1; 

} 

     function createtext() 
     { 

       txt1=document.createElement('input'); // Create an input element [textbox] 
     label1=document.createElement('label');//create a label 
      var tnode=document.createTextNode("click to edit label "); 
     label1.appendChild(tnode); 
     label1.onclick=function(){createLabel(tnode);} 
     txt1.setAttribute('type','text'); // Set the element as textbox 
     var txtid="field"+fieldidctr; 
     fieldidctr++; 

var link = document.createElement("A"); 
//link.href = "http://localhost/cake_1.2.1.8004/index.php/posts"; 
var atext = document.createTextNode("Remove"); 
link.appendChild(atext); 

link.onclick=function(){$(txtid).parentNode.removeChild($(txtid)); 
        $(labelid).parentNode.removeChild($(labelid)); 
myForm.removeChild(link); 
       } 



var labelid="labelid"+labelidctr; 
labelidctr++; 



     txt1.setAttribute('id',txtid); 
label1.setAttribute('id',labelid); 
     txt1.onchange=function(){var userInput = txt1.value; 
      txt1.setAttribute('value',userInput);} 
     myForm.appendChild(label1); 
     myForm.appendChild(txt1);//add the textbox to the MyForm 


myForm.appendChild(link); 
     var e=$('hold'); 
     e.appendChild(myForm); 
       myForm.onSubmit="save_field(this.txt1)"; 
     } 
    function createLabel(myForm) 
    { 
     myForm.data=prompt("Enter the label name "); 
    } 
    function createtextarea() 
     { 
     txt2=document.createElement('textarea'); // Create an input element [textbox] 
     label2=document.createElement('label');//create a label 
     var tnode=document.createTextNode("click to edit label "); 
     label2.appendChild(tnode); 
     label2.onclick=function(){createLabel(tnode);} 
     txt2.rows='10'; 
     txt2.cols='3'; 
     var txtid="field"+fieldidctr; 
     fieldidctr++; 


var labelid="labelid"+labelidctr; 
labelidctr++; 

var link = document.createElement("A"); 

var atext = document.createTextNode("Remove"); 
link.appendChild(atext); 

link.onclick=function(){$(txtid).parentNode.removeChild($(txtid)); 
        $(labelid).parentNode.removeChild($(labelid)); 
myForm.removeChild(link); 
} 


     txt2.setAttribute('id',txtid); 
label2.setAttribute('id',labelid); 
     txt2.onchange=function(){var userInput = txt2.value; 
     var txtnode=document.createTextNode(userInput); 
      txt2.appendChild(txtnode); 
      } 
     myForm.appendChild(label2); 
     myForm.appendChild(txt2);//add the textarea to the MyForm 

myForm.appendChild(link); 
     var e1=$('hold'); 
     e.appendChild(myForm); 
     myForm.onSubmit="save_field(this.txt2)"; 
    } 

</script> 

</div> 

<table border=0><tr> 

<td width="10%"> 

<button style="width:10" onclick="javascript: setformname()">Set the FormName</button><br><br><br> 
<button style="width:10" onclick="createtext();">TextBox</button><br><br><br> 

<button style="width:10" onclick="createtextarea();">TxtArea</button><br><br><br> 

</td> 
<td width="75%"> 

<div id="hold"> 

<label id="myForm">My Form </label> 
</div></td> 
</table> 

Answer 1

커뮤니티 위키 반복적으로 코드를 개선 :

function createtext() 
{ 
    var txt1=document.createElement('input'); // Create an input element [textbox] 
    var label1=document.createElement('label');//create a label 
    var tnode=document.createTextNode("click to edit label "); 
    label1.appendChild(tnode); 
    label1.onclick=function(){createLabel(tnode);} 
    txt1.setAttribute('type','text'); // Set the element as textbox 
    var txtid="field"+fieldidctr; 
    fieldidctr++; 

    var link = document.createElement("A"); 
    //link.href = "http://localhost/cake_1.2.1.8004/index.php/posts"; 
    var atext = document.createTextNode("Remove"); 
    link.appendChild(atext); 

    link.onclick=function() 
    { 
     $(txtid).parentNode.removeChild($(txtid)); 
     $(labelid).parentNode.removeChild($(labelid)); 
     myForm.removeChild(link); 
    } 



    var labelid="labelid"+labelidctr; 
    labelidctr++; 

    //////// 


    txt1.setAttribute('id',txtid); 
    label1.setAttribute('id',labelid); 
    txt1.onchange=function(){var userInput = txt1.value; 
    txt1.setAttribute('value',userInput);} 
    myForm.appendChild(label1); 
    myForm.appendChild(txt1);//add the textbox to the MyForm 


    myForm.appendChild(link); 
    var e=$('hold'); 
    e.appendChild(myForm); 
    myForm.onSubmit="save_field(this.txt1)"; 
} 

function createLabel(myForm) 
{ 
    myForm.data=prompt("Enter the label name "); 
} 

function createtextarea() 
{ 
    var txt2=document.createElement('textarea'); // Create an input element [textbox] 
    var label2=document.createElement('label');//create a label 
    var tnode=document.createTextNode("click to edit label "); 
    label2.appendChild(tnode); 
    label2.onclick=function(){createLabel(tnode);} 
    txt2.rows='10'; 
    txt2.cols='3'; 
    var txtid="field"+fieldidctr; 
    fieldidctr++; 

    var labelid="labelid"+labelidctr; 
    labelidctr++; 

    var link = document.createElement("A"); 
    var atext = document.createTextNode("Remove"); 
    link.appendChild(atext); 

    link.onclick=function() 
    { 
     $(txtid).parentNode.removeChild($(txtid)); 
     $(labelid).parentNode.removeChild($(labelid)); 
     myForm.removeChild(link); 
    } 

    //////////////// 

    txt2.setAttribute('id',txtid); 
    label2.setAttribute('id',labelid); 
    txt2.onchange=function() 
    { 
     var userInput = txt2.value; 
     var txtnode=document.createTextNode(userInput); 
     txt2.appendChild(txtnode); 
    } 

    myForm.appendChild(label2); 
    myForm.appendChild(txt2);//add the textarea to the MyForm 

    myForm.appendChild(link); 
    var e1=$('hold'); 
    e.appendChild(myForm); 
    myForm.onSubmit="save_field(this.txt2)"; 
} 

Answer 2

코드 didn를의 피상적 검토 명백한 오류를 드러내지 않습니다. 비록 전역 범위에서 많은 변수를 사용하고있는 것처럼 보이기 때문에 우리가 볼 수없는 충돌이있을 수 있습니다. 하나의 잠재적 인 문제는 두 변수 모두에 대해 동일한 변수를 사용하여 ID를 생성하므로 사용자가 다시 사용하는 ID 일 수 있습니다. fieldNNN 대신 textNNN이라는 텍스트 상자를 사용하여 테스트 할 수 있습니다.

이외에도 Firefox에서 Firebug를 사용하고 코드에 몇 가지 중단 점을 설정하여 할당되는 값을 확인하는 것이 좋습니다. 그 외에도 매개 변수를 사용하여 특성 값을 제공하는 작고 재사용 가능한 함수 (예 : 레이블 만들기, 필드 만들기)로 리팩터링하여 코드를 단순화 할 수있는 방법에 대해 생각해보십시오. $ ('hold')는 몇 가지 관용적 인 프레임 워크를 사용하고있는 것으로 보입니다. 프레임 워크에 DOM 요소를 좀 더 우아한 방식으로 생성하는 방법이 있는지 확인할 수도 있습니다.

Answer 3

일부 요소에는 레이블 및 버튼과 같은 방법 appendChild()이 없습니다. 우리는 이러한 요소를 사용할 때보다 IE는 다른 브라우저에서는 메서드 또는 속성 액세스

에 오류 메시지가

예기치 않은 호출을 생성, 그들은 IE보다 똑똑하다. 그들은 콘텐츠를 렌더링합니다. 그렇기 때문에 appendChild()은 IE의 라벨, 버튼 등에서 잘 작동합니다.

간단한 해결책은