如何用javascript插入换行符？

Posted 2023-02-22

【中文标题】如何用javascript插入换行符？

【英文标题】：How to insert a line break with javascript?

【发布时间】：2014-04-11 22:19:45

【问题描述】：

我的提交表单包含姓名、电子邮件和电话号码字段。当然，我想在三者之间插入换行符。我试图在所有三个之间插入一个换行符，但只在表单末尾生成一个换行符，而我的代码应该附加 3 个换行符，而不是一个。

生成的视图源显示如下：

<label>Name: </label><input required="" name="fullName" type="text"><label>Email: </label>   <input required="" name="email" type="text"><label>Phone Number: </label><input required="" name="phoneNumber" type="text"><br><input value="Submit Query" type="submit"></form>

生成此表单的我的 javascript 代码：

function queryForm()

    var queryBox = document.getElementById("queryBox").style.display = "block";
    var queryForm = document.getElementById("queryForm");
    var linebreak = document.createElement("br");

    var lblName = document.createElement("label");
    lblName.textContent = "Name: ";
    queryForm.appendChild(lblName);

    var fullName = document.createElement("input");
    fullName.name = "fullName";
    fullName.type = "text";
    fullName.required = "required";
    queryForm.appendChild(fullName);
    queryForm.appendChild(linebreak);


    var lblEmail = document.createElement("label");
    lblEmail.textContent = "Email: ";
    queryForm.appendChild(linebreak);
    queryForm.appendChild(lblEmail);

    var email = document.createElement("input");
    email.name = "email";
    email.type = "text";
    email.required = "required";
    queryForm.appendChild(email);


    var lblPhoneNumber = document.createElement("label");
    lblPhoneNumber.textContent = "Phone Number: ";
    queryForm.appendChild(linebreak);
    queryForm.appendChild(lblPhoneNumber);

    var phoneNumber = document.createElement("input");
    phoneNumber.name = "phoneNumber";
    phoneNumber.type = "text";
    phoneNumber.required = "required";
    queryForm.appendChild(phoneNumber);


    var submitQuery = document.createElement("input");
    submitQuery.type = "submit";
    submitQuery.value = "Submit Query";
    queryForm.appendChild(linebreak);
    queryForm.appendChild(submitQuery);

【参考方案1】：

您可以使用经典的 \n 来使其工作。我在我的项目中将此解决方案用于多行 textarea，但 我删掉了一些代码 以简化示例：

explanation.value = 'Equation: ' + equation;

explanation.value += '\nAnswer: ' + answer;

【讨论】：

这对我不起作用。这失败了：$('.weather').replaceWith(weather + '\n');

【参考方案2】：

您应该在每次追加时创建新的<br> 标签，类似于

linebreak = document.createElement("br");
queryForm.appendChild(linebreak);

DEMO

【参考方案3】：

您的代码的问题是您一遍又一遍地插入 same 元素。

打个比方：假设您有几个孩子排成一排。是的，您可以尝试在其他每个孩子之后移动其中一个，但是，在一天结束时，您仍然只有一个孩子。他最终会排在最后一排。

解决方案：每次需要插入时都创建换行元素。

另外，这里有一个 jQuery 的强制插件：http://www.jquery.com

【参考方案4】：

您应该尝试每次添加一个新节点，而不是之前创建的同一个节点，即：

queryForm.appendChild(document.createElement("br"));

编辑： 解释在文档中

Node.appendChild 将一个节点添加到指定父节点的子节点列表的末尾。如果节点已经存在，则将其从当前父节点中移除，然后添加到新的父节点中。

https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

【参考方案5】：

Protip：将您的inputs 附加到您的labels。这样用户就可以点击标签来获得对输入的关注。

这有一个额外的好处，您可以简单地将 CSS display:block 应用到您的 labels 并将它们放在单独的行上！