使用Javascript在HTML中添加换行符_Javascript_Html

使用Javascript在HTML中添加换行符

javascript html

使用Javascript在HTML中添加换行符,javascript,html,Javascript,Html,我正在尝试在每次按下按钮时在一些文本后添加一个换行符。以下是HTML文件中有关问题的部分- <input type="text" id="fname" name="fname"> <button type = "button" onclick = "prtText('fname')">SEND</button> <p id="para"></p> <script> var node = document.create

我正在尝试在每次按下按钮时在一些文本后添加一个换行符。以下是HTML文件中有关问题的部分-

<input type="text" id="fname" name="fname">

<button type = "button" onclick = "prtText('fname')">SEND</button>

<p id="para"></p>

<script>

var node = document.createElement("P");

function prtText(addr)
{
var x = document.getElementById(addr).value;
var txt = x + '\n'
var textnode = document.createTextNode(txt);

node.appendChild(textnode);
document.getElementById("para").appendChild(node);
}

</script>

但它被印成这样的东西-

ExampleText ExampleText

我尝试过另一种方法-

var txt=x+'
'

，但它像这样打印-

ExampleText
ExampleText

，并且不打印换行符

我该怎么办？

这是因为新行在HTML中转换为空格。例如：


这是一个句子。有时句子太大而无法理解
放在一条线内，所以我们把线一分为二。

这是因为新行在HTML中转换为空格。例如：


这是一个句子。有时句子太大而无法理解
放在一条线内，所以我们把线一分为二。


发送

var节点=document.createElement（“P”）；
功能prtText（地址）
{
var txt='\n'+document.getElementById（addr.value）；
document.getElementById（“para”）.innerText+=txt；
}

干得好。HTML元素具有属性innerText，允许您编辑元素的内容。注意，如果有任何元素，它将在元素内部发生更改。


发送

var节点=document.createElement（“P”）；
功能prtText（地址）
{
var txt='\n'+document.getElementById（addr.value）；
document.getElementById（“para”）.innerText+=txt；
}

干得好。HTML元素具有属性innerText，允许您编辑元素的内容。注意，如果有任何元素，它将在元素内部发生更改。

通常使用内联事件处理程序。下面是一个片段，它将输入值添加到段落（

p#para

），并在单击

按钮#sendBttn

时清空输入元素。该值被包装在一个

div

，a中，这意味着它将始终从一个新的“行”开始。一,

1您也可以使用

结束值字符串，但在这种情况下，您不能使用

innerText

、

createTextNode

或

textContent

document.addEventListener（“单击”，打印值）；
函数printValue（evt）{
//仅在单击按钮时执行操作
如果（evt.target.id==“sendBttn”）{
const inputEl=document.querySelector（“输入#fname”）；
const value=inputEl.value.trim（）；
//值可能为空
如果（值）{
//创建块元素
const newLine=document.createElement（“div”）；
//填充值
newLine.textContent=“已发送：”+值；
//将其附加到现有段落
文件。查询选择器（“#段落”）。追加子项（换行符）；
//重置输入值
inputEl.value=“”；
//焦点回到输入字段
inputEl.focus（）；
}
}
}

正文{
字体：普通12px/15px verdana，arial；
保证金：2rem；
}
#帕拉迪夫{
填充物：2个3个；
边框：1px实心#eee；
最大宽度：500px；
保证金：2倍；
}


发送