Question

我想将新行中的字符串插入到我的textarea HTML元素中。

我有这个textarea元素：

<textarea id="txtLogs" rows="13" cols="220"></textarea>

有时我会在上面的元素中添加文本：

document.getElementById('txtLogs').value = 'tileloadStart...' + ' ' + layer.get('name') + ' ' + myTime;

再过一段时间：

document.getElementById('txtLogs').value = 'tileloadEnd...' + ' ' + layer.get('name') + ' ' + myTime;

每次将字符串添加到textarea元素时，都会将其添加到同一行，而我需要将新字符串插入到新行中。

如何更改代码以将字符串添加到textarea元素并将其显示在新行中？

Answer 1

您可以在每行末尾添加换行符（\n）。另外，不要忘记我们要添加新行，因此您必须使用+=：

 document.getElementById('txtLogs').value = 'first line\n';
 document.getElementById('txtLogs').value += 'second line\n';
 document.getElementById('txtLogs').value += 'third line\n';

 <textarea id="txtLogs" rows="13" cols="220"></textarea>

Answer 2

您还需要添加一个返回字符（\n）

document.querySelector('.btn').onclick = () => {
  let newRowString = "something on a new Row";
  let otherNewRowString = "Something else on a new row";


  let currentValue = document.getElementById('txtLogs').value;
  document.getElementById('txtLogs').value = currentValue + '\n' + 'tileloadStart...' + '\n' + newRowString + '\n' + otherNewRowString; 
};

<textarea id="txtLogs"></textarea>

<button class="btn">add new row</button>

将字符串添加到textarea元素的新行中

2 个答案: