Как вставить разрыв строки с помощью JavaScript?

в форме отправки у меня есть поля имя, адрес электронной почты и номер телефона. Конечно, я хочу вставить разрыв между этими тремя. Я попытался вставить разрыв строки между всеми тремя, но только сгенерировал один в конце формы, когда мой код должен был добавить 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);
}
6
appendchild forms function html javascript

4 ответов

вы должны создать новый <br> тег каждый раз, когда вы добавить его, что-то вроде 

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

демо

19

проблема с вашим кодом заключается в том, что вы вставляете же элемент снова и снова.

вот аналогия: представьте, что у вас есть несколько детей, выстроенных в ряд. Да, вы можете попытаться переместить одного из них после каждого из других детей, однако в конце дня у вас все еще есть только один из этого ребенка. Он кончит в конце ряда.

решение: создайте элемент разрыва строки каждый раз, когда вам нужно вставить он.

кроме того, вот обязательный плагин для jQuery:http://www.jquery.com

6

вы должны пытаться добавлять каждый раз новый узел, а не тот, который был ранее создан, i.e:

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

изменить: объяснение здесь, в документации

узел.метода appendChild Добавляет узел в конец списка дочерних элементов указанного родительского узла. Если узел уже существует, он удаляется из текущего родительского узла, а затем добавляется в новый родительский узел узел.

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

4

Protip: добавьте свой inputна labels. Таким образом, пользователь может щелкнуть метку, чтобы сосредоточиться на вводе.

это имеет дополнительное преимущество, что вы можете просто применить для CSS display:block на labelS и иметь их на отдельных строках!

2