web-dev-qa-db-ja.com

javascriptで改行を挿入する方法は？

提出フォームには、名前、メール、電話番号のフィールドがあります。もちろん、3つの間に改行を挿入します。私は3つすべての間に改行を挿入しようとしましたが、フォームの最後に1つだけを生成しました。コードでは1つではなく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);
}
javascripthtmlformsfunctionappendchild
9
TheAmazingKnight

追加するたびに新しい<br>タグを作成する必要があります。

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

[〜＃〜] demo [〜＃〜]

22
Suman Bogati

コードの問題は、same要素を何度も挿入していることです。

アナロジーは次のとおりです。複数の子供が一列に並んでいると想像してください。はい、他の子供のそれぞれの後にそれらの1つを移動しようとすることができますが、1日の終わりにはまだその子供は1人しかいません。彼は行の終わりに行きます。

解決策：挿入する必要があるたびに改行要素を作成します。

また、jQueryの必須プラグは次のとおりです。 http://www.jquery.com

7
Sunjay Varma

以前に作成された同じノードではなく、新しいノードを追加するたびに試行する必要があります。

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

編集：説明はドキュメントにあります

Node.appendChild指定した親ノードの子のリストの最後にノードを追加します。ノードがすでに存在する場合、現在の親ノードから削除され、新しい親ノードに追加されます。

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

4
Shay Elkayam

ヒント：inputsをlabelsに追加します。これにより、ユーザーはラベルをクリックして入力に集中できます。

これには、CSS display:blockをlabelsに追加し、別々の行に配置します。

3
Niet the Dark Absol