web-dev-qa-db-fra.com

Comment insérer un saut de ligne avec javascript?

Le formulaire de soumission que j'ai contient les champs de nom, e-mail et numéro de téléphone. Bien sûr, je veux insérer un saut de ligne entre les trois. J'ai essayé d'insérer un saut de ligne entre les trois, mais je n'en ai généré qu'un à la fin du formulaire, lorsque mon code devrait ajouter 3 sauts de ligne, pas un.

La source de vue générée montre ceci:

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

Mon code Javascript pour produire ce formulaire:

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);
}
javascripthtmlformsfunctionappendchild
9
TheAmazingKnight

Vous devez créer de nouveaux <br> tag chaque fois que vous l'ajouterez, quelque chose comme

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

[~ # ~] démo [~ # ~]

22
Suman Bogati

Le problème avec votre code est que vous insérez le même élément encore et encore.

Voici une analogie: imaginez que vous avez plusieurs enfants alignés. Oui, vous pouvez essayer de déplacer l'un d'eux après chacun des autres enfants, cependant, à la fin de la journée, vous n'avez toujours qu'un seul de cet enfant. Il va finir au bout du rang.

Solution: créez l'élément de saut de ligne chaque fois que vous devez l'insérer.

En outre, voici un plug obligatoire pour jQuery: http://www.jquery.com

7
Sunjay Varma

Vous devez essayer d'ajouter à chaque fois un nouveau nœud, et pas le même que celui qui a été créé précédemment, à savoir:

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

EDIT: l'explication est ici sur la documentation

Node.appendChild Ajoute un nœud à la fin de la liste des enfants d'un nœud parent spécifié. Si le nœud existe déjà, il est supprimé du nœud parent actuel, puis ajouté au nouveau nœud parent.

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

4
Shay Elkayam

Protip: ajoutez vos inputs à vos labels. De cette façon, un utilisateur peut cliquer sur l'étiquette pour se concentrer sur l'entrée.

Cela a l'avantage supplémentaire que vous pouvez simplement appliquer le CSS display:block à vos labels et placez-les sur des lignes séparées!

3
Niet the Dark Absol