在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
È
升
升
Ø

问题是当我更改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

.value元素的<input type="text">被解析为纯文本，而不是HTML。设置为"<br>"的{​​{1}}会导致.value在"<br>"

呈现为文字

Answer 3

您无法在input内插入HTML，但您可以在textarea内插入文字并使用\n（新行）字符代替<br>：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;