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 Node中的所有内容。

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

<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

使用jquery创建表单。输入元素后无法附加<br/>

3 个答案: