javascript - This works in IE but not chrome. How do I get it to work in all browsers?

Question

This works great in IE, but I tested it in chrome and it does not work. First I create a text area with HTML tags and color drop down selection. It should write into the text area "This is a p tag" and in the color that you pick from the drop down selection. jsFiddle . I only know javascript, haven't started to learn jQuery yet.

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

I think this change is what you want, I don't believe children are allowed within a textarea

Replaceable character data In documents in the HTML syntax, the title and textarea elements can contain replaceable character data. Replaceable character data can contain the following:

text, optionally including "<" characters character references Replaceable character data has the following restrictions:

must not contain any ambiguous ampersands must not contain any occurrences of the string "", or "/".

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