为什么分配给`<textarea>`节点的`.innerHTML`不起作用？我应该用什么来代替？

Question

我使用

.innerHTML

在

textarea

中添加文本。但是如果我开始自己编辑

textarea

中的文本，脚本就会停止工作。

这是：

var addPort = function (name) {
    switch(name) {
    case 'name1':
        var code = "text1"; 
        break
    case 'name2':
        var code = "text2";
        break
    case 'name3':
        var code = "text3";
        break
    default:
        break
    }
    document.getElementById("codeArea").innerHTML += code;
};

<textarea id="codeArea" name="codeAreaPost">abcdef</textarea>
<p> <button onclick="addPort()">addPort()</button>

Answer 1

它只是用值属性替换

innerHTML

document.getElementById("codeArea").value

不是

innerHTML

Answer 2

innerHTML

会将值解析为 HTML 并使生成的 DOM 成为文本区域的子元素。这不是你想要的。尝试使用

value

属性：

document.getElementById("codeArea").value += code;