IE에서는 작동하지만 크롬에서는 작동하지 않습니다. 모든 브라우저에서 어떻게 작동합니까?

Question

IE에서 잘 작동하지만 Chrome에서 테스트 한 결과 작동하지 않습니다. 먼저 HTML 태그와 색상 드롭 다운 선택 영역이있는 텍스트 영역을 만듭니다. 텍스트 영역 "This is a p tag"와 드롭 다운 선택에서 선택한 색상으로 작성해야합니다. jsFiddle. 난 단지 자바 스크립트를 알고 jQuery를 배우기 시작하지 않았다.

function createTextArea() { 
    var textAreaElement = document.createElement("textarea"); 
    textAreaElement.id = "textarea"; 
    textAreaElement.rows = "13"; 
    textAreaElement.cols = "25"; 
    document.body.appendChild(textAreaElement); 
} 

function textArea() { 
    var textarea = document.getElementById("textarea"); 
    var mylist = document.getElementById("myList"); 
    var options = mylist.options[mylist.selectedIndex].text; 
    var color = textcolor.options[textcolor.selectedIndex].text; 
    var element = document.createElement(options); 
    var mytext; 
    var textColor; 

    switch (options) { 
     case "p": 
      mytext = "I am a paragraph tag."; 
      break; 
     case "div": 
      mytext = "I am a div tag."; 
      break; 
     case "span": 
      mytext = "I am a span tag."; 
      break; 
     case "strong": 
      mytext = "I am a strong tag."; 
      break; 
     case "h1": 
      mytext = "I am a h1 tag."; 
      break; 
     case "em": 
      mytext = "I am a em tag."; 
      break; 
    } 

    switch (color) { 
     case "Red": 
      textColor = "red"; 
      break; 
     case "Blue": 
      textColor = "blue"; 
      break; 
     case "Pink": 
      textColor = "pink"; 
      break; 
     case "Green": 
      textColor = "green"; 
      break; 
     case "Crimson": 
      textColor = "crimson"; 
      break; 
     case "Yellow": 
      textColor = "yellow"; 
      break; 
     case "Dark Slate Blue": 
      textColor = "DarkSlateBlue"; 
      break; 
     case "Dark Orange": 
      textColor = "DarkOrange"; 
      break; 
     case "Dark Violet": 
      textColor = "DarkViolet"; 
      break; 
     case "Deep Pink": 
      textColor = "DeepPink"; 
      break; 
     case "Fuchsia": 
      textColor = "Fuchsia"; 
      break; 
     case "Lime": 
      textColor = "Lime"; 
      break; 
     case "Maroon": 
      textColor = "Maroon"; 
      break; 
     case "Saddle Brown": 
      textColor = "SaddleBrown"; 
      break; 
     case "Teal": 
      textColor = "Teal"; 
      break; 
    } 
    var text = document.createTextNode(mytext); 
    element.style.color = textColor; 
    element.appendChild(text); 
    textarea.appendChild(element); 
} 

function textAreaElements() { 
    var selectElement = document.createElement("select"); 
    selectElement.id = "myList"; 
    selectElement.onchange = textArea; 

    for (i = 0; i < 7; i++) { 
     var options = document.createElement("option"); 
     var elements; 
     switch (i) { 
      case 0: 
       elements = " "; 
       break; 
      case 1: 
       elements = "p"; 
       break; 
      case 2: 
       elements = "div"; 
       break; 
      case 3: 
       elements = "span"; 
       break; 
      case 4: 
       elements = "strong"; 
       break; 
      case 5: 
       elements = "h1"; 
       break; 
      case 6: 
       elements = "em"; 
       break; 
     } 
     var text = document.createTextNode(elements); 
     document.body.appendChild(selectElement); 
     selectElement.appendChild(options); 
     options.appendChild(text); 
    } 
} 

function textAreaColor() { 
    var selectElement = document.createElement("select"); 
    selectElement.id = "textcolor"; 
    selectElement.onchange = textArea; 
    for (i = 0; i < 16; i++) { 
     var options = document.createElement("option"); 
     var color; 
     switch (i) { 
      case 0: 
       color = " "; 
       break; 
      case 1: 
       color = "Red"; 
       break; 
      case 2: 
       color = "Blue"; 
       break; 
      case 3: 
       color = "Pink"; 
       break; 
      case 4: 
       color = "Green"; 
       break; 
      case 5: 
       color = "Crimson"; 
       break; 
      case 6: 
       color = "Yellow"; 
       break; 
      case 7: 
       color = "Dark Slate Blue"; 
       break; 
      case 8: 
       color = "Dark Orange"; 
       break; 
      case 9: 
       color = "Dark Violet"; 
       break; 
      case 10: 
       color = "Deep Pink"; 
       break; 
      case 11: 
       color = "Fuchsia"; 
       break; 
      case 12: 
       color = "Lime"; 
       break; 
      case 13: 
       color = "Maroon"; 
       break; 
      case 14: 
       color = 'Saddle Brown'; 
       break; 
      case 15: 
       color = 'Teal'; 
       break; 
     } 

     var text = document.createTextNode(color); 
     document.body.appendChild(selectElement); 
     selectElement.appendChild(options); 
     options.appendChild(text); 
    } 
}  

createTextArea(); 
textAreaElements(); 
textAreaColor(); 

Answer 1

나는이 변화는 당신이 원하는 생각 나는 제목 및 텍스트 영역 요소 수, 아이들이 HTML 구문 문서에서 textarea

교체 문자 데이터 내에서 허용된다 믿지 않는다 대체 가능한 문자 데이터를 포함합니다. 다음이 포함될 수 있습니다 교체 문자 데이터 :

텍스트, 선택적으로 "<"문자 문자를 포함하여 교체 문자 데이터는 다음과 같은 제한 사항이 있습니다 참조 :

의 모든 발생을 포함 할 수 없습니다 어떤 모호한 앰퍼샌드를 포함 할 수 없습니다 문자열 ""또는 "/"입니다.

textarea.style.color = textColor; 
//element.appendChild(text); 
//textarea.appendChild(element); 
textarea.value = mytext;