如何使用JavaScript插入换行符？

Question

我所使用的提交表单包含姓名、电子邮件和电话号码字段。我想在这三个字段之间插入换行符。我尝试在所有三个字段之间插入换行符，但只生成了一个位于表单末尾的换行符，我的代码应该添加三个换行符，而不是一个。

生成的视图源代码如下：

<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);
}

- TheAmazingKnight

Answer 1

每次在附加时，您应该创建一个新的 <br> 标签，类似于以下方式：

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

演示

- Suman Bogati

Answer 2

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

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

编辑： 文档中已经有解释。

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

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

- Shay Elkayam

Answer 3

你的代码问题在于你一遍又一遍地插入了相同的元素。

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

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

此外，这里强制推荐使用jQuery：http://www.jquery.com

- Sunjay Varma

Answer 4

提示：把你的标签添加到标签中。这样，用户可以点击标签来聚焦输入框。

这种方法的额外好处是，你只需将CSS的"display:block"应用于标签，就可以将它们显示在不同的行上！

- Niet the Dark Absol

Answer 5

你可以使用经典的 \n 来使其工作。我在项目中使用了这个解决方案来处理多行文本框，但为了简化示例，我删掉了一些代码。

explanation.value = 'Equation: ' + equation;

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

- CaptainGenesisX

---

这对我没用。这个失败了：$（'.weather'）.replaceWith（weather +'\n'）; - Adrian