如何通过JavaScript实现向textarea插入内容时自动换行

嘿，这事儿超简单～你现在的代码只是把新内容直接拼在原有内容后面，没加换行符，所以才会挤成一团。只需要给每次生成的内容加上换行标识，就能实现每次追加都另起一行的效果啦。

这里给你两种方案，按需选择：

方案1：避免开头空行（更严谨） #

如果不想第一次发布内容时开头就有空行，可以先判断textarea当前是否已有内容，再决定要不要先加换行：

document.getElementById("post").addEventListener('click', function () {
    var username = document.getElementById('username').value;
    var input = document.getElementById('input').value;
    var output = document.getElementById('output');
    var outputtext = username + ":" + input;
    
    // 已有内容就先加换行，没有就直接赋值
    if (output.value) {
        output.value += "\n" + outputtext;
    } else {
        output.value = outputtext;
    }
});

方案2：简单直接版 #

如果不在乎第一次发布后末尾的空行，也可以直接在生成内容时就带上换行符：

document.getElementById("post").addEventListener('click', function () {
    var username = document.getElementById('username').value;
    var input = document.getElementById('input').value;
    var output = document.getElementById('output');
    // 直接在内容末尾加换行符\n
    var outputtext = username + ":" + input + "\n";
    output.value += outputtext;
});

两种方案都能让新发布的内容自动另起一行显示，选你觉得顺手的就行～

内容的提问来源于stack exchange，提问作者T.script