这在IE中有效，但在chrome中不起作用。 如何使它在所有浏览器中都能正常工作？

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 ap 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;