使用 jquery 创建表单。不能在输入元素后附加 <br>答案

【问题标题】：Creating a form with jquery. Cannot append <br> after input element使用 jquery 创建表单。不能在输入元素后附加 <br>
【发布时间】：2013-09-20 00:15:53
【问题描述】：

这是我需要使用 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，还有足够的空间。

【问题讨论】：

标签： jquery forms input login line-breaks

【解决方案1】：

.text()覆盖元素的全部内容，使用.append()代替.text()

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

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

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

【讨论】：