如何使用javascript插入换行符？

Question

我提交的表单有姓名，电子邮件和电话号码字段。当然，我想在三者之间插入换行符。我试图在所有三个之间插入一个换行符，但只在表单的末尾生成一个换行符，当我的代码应该附加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);
}

Answer 1

每次添加时都应创建新的<br>标记，例如

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

DEMO

Answer 2

您的代码存在的问题是您一遍又一遍地插入相同的元素。

这是一个类比：想象一下，你有几个孩子排成一排。是的，你可以尝试在每个其他孩子之后移动其中一个，但是，在一天结束时你仍然只有一个孩子。他最终会在比赛结束时结束。

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

此外，这是jQuery的强制性插件：http://www.jquery.com

Answer 3

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

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

编辑： 解释在这里的文档

<强> Node.appendChild 将节点添加到指定父节点的子节点列表的末尾。如果该节点已存在，则将其从当前父节点中删除，然后添加到新的父节点。

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

Answer 4

Protip：将input添加到label。这样，用户可以单击标签以关注输入。

这有额外的好处，你可以简单地将CSS display:block应用到你的label并将它们放在不同的行上！

Answer 5

您可以使用经典\ n使其正常工作。我在项目中的多行 textarea 中使用了该解决方案，但是我剪切了一些代码来简化示例：

explanation.value = 'Equation: ' + equation;

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