jquery - 使用 jquery 创建表单。不能在输入元素后追加

Question

这是我需要使用 jquery 创建的 HTML 版本表单...

<form id="loginForm" class="loginLabel" action="login/login.php" method="post">
    Username : <input type="text" name="Username" ><br>
    Password : <input type="password" name="Password" ><br>
    <input type="Submit" name="login_Submit" value="Login">
</form>

这是我为它写的jquery...

    var loginForm = document.createElement("form");

    var userInput = document.createElement("input");
        $(userInput).attr("id", "userInput")
                   .attr("type", "text")
                   .attr("name", "Username");

    var br = document.createElement('br');

    var passInput = document.createElement("input");
        $(passInput).attr("id", "passInput")
                   .attr("type", "text")
                   .attr("name", "Password");

    $(loginForm).attr("id","loginForm" )
            .attr("class", "loginLabel")
            .text("Username : ")
            .append(userInput)
            .append(br)
            .text("Password : ")
            .append(passInput);

    $(loginWrapper).append(loginForm);

不幸的是，jquery 用密码输入 (passInput) 覆盖了用户名输入 (userInput)。我检查了 CSS 并且有足够的空间可以解决。

Answer 1

.text()覆盖元素的全部内容，使用.append()而不是.text()

$(loginForm).attr("id","loginForm" )
        .attr("class", "loginLabel")
        .append("Username : ")
        .append(userInput)
        .append(br)
        .append("Password : ")
        .append(passInput);

Answer 2

因为 text 函数会将 DOM 节点中的所有内容替换为新值。

为什么不只使用字符串连接：

<div id="loginWrapper"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
var html = 
    '<form id="loginForm" class="loginLabel" action="login/login.php" method="post">' + 
    'Username : <input type="text" name="Username" ><br>' + 
    'Password : <input type="password" name="Password" ><br>' + 
    '<input type="Submit" name="login_Submit" value="Login">';
$("#loginWrapper").append($(html));
</script>

Answer 3

Musa 是正确的.text()会覆盖，为了解决这个问题，您可以使用document.createTextNode(data);创建一个 textNode 将这些附加到您的表单中。

工作小提琴：http: //jsfiddle.net/QDpsP/9/

https://developer.mozilla.org/en-US/docs/Web/API/document.createTextNode