javascript - 如何使用 HTML 和 JavaScript 使用 DOM 元素在运行时打印多行文本

Question

我坚持如何打印多行文本，我不知道如何实现它。我也尝试寻找类似的问题来打印多行，但他们都没有在运行时这样做......只是他们打印或返回多行文本。

提前致谢。

function typo() {
    var currentText = document.getElementById("wrapper").innerHTML;
    var x = '<br>' + '<div><p class=bubble>' + '<br>' + document.getElementById("myText").value + '</p></div>';
    document.getElementById("myText").value = "";
    var y = document.getElementById("wrapper").innerHTML = currentText + x;

    var z = document.getElementById("wrapper");
    z.scrollTop = z.scrollHeight;

    document.getElementById("myText").focus();
}

<div id="wrapper"></div>
    <textarea  type="text" id="myText" value=""></textarea>
    <button onclick="typo()" class="btn btn-warning btn-sm" id="btn-chat">Send</button>
</div>

Answer 1

添加css片段

#wrapper {white-space:pre-wrap;}

Answer 2

HTML 不能将标准换行符识别为换行符。要换行，您需要将所有出现的换行符 ( \n) 替换为<br>标记：

function typo() {
  var currentText = document.getElementById("wrapper").innerHTML;
  var x = '<br>' + '<div><p class=bubble>' + '<br>' + document.getElementById("myText").value.replace(/\n/g, '<br>') + '</p></div>';
  document.getElementById("myText").value = "";
  var y = document.getElementById("wrapper").innerHTML = currentText + x;

  var z = document.getElementById("wrapper");
  z.scrollTop = z.scrollHeight;

  document.getElementById("myText").focus();
}

<div id="wrapper"></div>
<textarea type="text" id="myText" value=""></textarea>
<button onclick="typo()" class="btn btn-warning btn-sm" id="btn-chat">Send</button>
</div>

Answer 3

只需将换行符 ( \n) 替换为 HTML 换行符 ( <br>)：

function typo() {
   var currentText = document.getElementById("wrapper").innerHTML;
    var x = '<br>'+'<div><p class=bubble>'+'<br>' + document.getElementById("myText").value.split('\n').join('<br>') + '</p></div>';
    document.getElementById("myText").value = "";
    var y = document.getElementById("wrapper").innerHTML = currentText + x ;

    var z = document.getElementById("wrapper");
    z.scrollTop = z.scrollHeight;
   
    document.getElementById("myText").focus();  
    }

<div id="wrapper"></div>
<textarea  type="text" id="myText" value=""></textarea>
  <button onclick="typo()" class="btn btn-warning btn-sm" id="btn-chat">Send</button>
     </div>