在javascript中，为什么当我使用 <p> 标签时，会显示结果。但是当我使用输入文本时，结果没有像我预期的那样显示

Question

我编写代码来拆分单词，结果将显示在单独的行中。 第一个代码运行良好： 点击！

<p id="demo"></p>

<script>
function run() {
var str = "Hello";
var res = str.split("").join("<br/>");
document.getElementById("demo").innerHTML = res;
}
</script>

结果：H
e
l
l
o

问题是当我更改 p 标签时，它不起作用：

<button onclick="run()">Click!</button>

<input type="text" id="demo" name="demo" />

<script>
function run() {
var str = "Hello";
var res = str.split("").join("<br/>");
document.getElementById("demo").value = res;
}
</script>

请帮我解决这个问题。提前致谢！

Answer 1

输入中不能有新行。尝试使用 textarea 标签：

<button onclick="run()">Click!</button>

<textarea type="text" id="demo" name="demo"></textarea>

<script>
function run() {
var str = "Hello";
var res = str.split("").join("\n");
document.getElementById("demo").innerHTML = res;
}
</script>

https://jsfiddle.net/yrxzemm3/

Answer 2

<input type="text"> 元素的 .value 被解析为纯文本，而不是 HTML。 "<br>" 设置为 .value 应该会导致 "<br>" 在 .value 处呈现为文本

Answer 3

您不能在 input 中插入 HTML，但您可以在 textarea 中插入文本并使用 \n（新行）字符而不是 <br>：

function run() {
  var str = "Hello";
  var res = str.split("").join("\n");
  document.getElementById("demo").value = res;
}

<button onclick="run()">Click!</button>
<textarea type="text" id="demo" name="demo"></textarea>