如何用javascript插入换行符？ [英] How to insert a line break with javascript?

问题描述

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

生成的视图源显示如下：

 < label>名称：< / label>< input required =name = fullNametype =text>< label>电子邮件：< / label> < input required =name =emailtype =text>< label>电话号码：< / label>< input required =name =phoneNumbertype =text> < br><输入值=提交查询type =submit>< / form> 
  

我的Javascript代码生成此表单：

 函数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 =电子邮件：; 
 queryForm.appendChild（linebreak）; 
 queryForm.appendChild（lblEmail）; 
 
 var email = document.createElement（input）; 
 email.name =email; 
 email.type =text; 
 email.required =必需; 
 queryForm.appendChild（email）; 
 
 
 var lblPhoneNumber = document.createElement（label）; 
 lblPhoneNumber.textContent =电话号码：; 
 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 =提交查询; 
 queryForm.appendChild（linebreak）; 
 queryForm.appendChild（submitQuery）; 
 
  

解决方案

您应该创建新的标记，每次你将追加它时，就像



  linebreak = document.createElement（br）; 
 queryForm.appendChild（linebreak）; 
  

DEMO

The Submit Form I have has the name, email, and phone number fields. Of course, I want to insert line break between the three. I tried to insert a line break between all three, but only generated one at the end of the form, when my code should appended 3 line breaks, not one.

The generated view source shows this:

<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>

My Javascript Code to produce this form:

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

解决方案

You should create new <br> tag each time when you will append it, something like

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

DEMO

这篇关于如何用javascript插入换行符？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！