javascript - 动态登录格式

Question

我的这个功能的目标是拥有

用户名:输入

密码:输入

重复密码:输入

但现在的格式是:

用户名:

输入

密码:

输入

重复密码:

输入

我该如何修复这种格式？我相信这与我将它们附加到表单区域的方式有关，但我似乎无法解决这个问题。非常感谢任何帮助!

function addLogin(){
var f = document.createElement("form");
f.setAttribute('method', "post");
f.setAttribute('action', "project6.php");

var userTxt = document.createElement("p");
userTxt.innerHTML ="Username: ";
var username = document.createElement("input");
username.setAttribute('type', "text");
username.setAttribute('name', "username");

var passOneTxt = document.createElement("p");
passOneTxt.innerHTML = "Password: ";
var passOne = document.createElement("input");
passOne.setAttribute('type', "text");
passOne.setAttribute('name', "passOne");

var passTwoTxt = document.createElement("p");
passTwoTxt.innerHTML = "Repeat Password: ";
var passTwo = document.createElement("input");
passTwo.setAttribute('type', "text");
passTwo.setAttribute('name', "passTwo");

f.appendChild(userTxt);
f.appendChild(username);
f.appendChild(passOneTxt);
f.appendChild(passOne);
f.appendChild(passTwoTxt);
f.appendChild(passTwo);

var area = $("formarea");
area.appendChild(f);
}

Answer 1

将段落标签用作容器，并将标签和输入作为子项添加到该段落。

var userP = document.createElement("p")
var userTxt = document.createElement("span");
userTxt.innerHTML ="Username: ";
var username = document.createElement("input");
username.setAttribute('type', "text");
username.setAttribute('name', "username");
userP.appendChild(userTxt);
userP.appendChild(username);

f.appendChild(userP)